Bmap 百度地圖

引入

<script type="text/javascript"

src="http://api.map.baidu.com/api?v=3.0&ak=y4PT8G6QkwtkVU7p5P26O8azvuRXg9Lz"></script>

<script type="text/javascript"

src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

<link rel="stylesheet"

/>

<div id="container"></div>

var map = new BMap.Map("container");// 創建地圖實例

var point = new BMap.Point(116.404, 39.915);// 創建點坐標

map.centerAndZoom(point, 15);// 設置中心點坐標和放大倍數

添加控件

map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放

map.addControl(new BMap.NavigationControl());//縮放尺

map.addControl(new BMap.ScaleControl()); //比例尺

map.addControl(new BMap.OverviewMapControl());//縮略圖

map.addControl(new BMap.MapTypeControl()); //地圖類型

添加標注

var marker = new BMap.Marker(point); //標記點

var label = new BMap.Label("公司",{offset:new BMap.Size(20,-10)});//標簽

marker.setLabel(label) //標記點 綁定 標簽

map.addOverlay(marker); // 將標記點添加到地圖中

marker.enableDragging(); //標記點可以拖動的

marker.addEventListener("dragend", function(e){

alert("當前位置：" + e.point.lng + ", " + e.point.lat);//拖動后坐標

});

添加折線.Polygon 多邊形

var polyline = new BMap.Polyline([

new BMap.Point(116.399, 39.910),

new BMap.Point(116.405, 39.920)

],

{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}

);

map.addOverlay(polyline);

var point = new BMap.Point(120.387244,36.064835);

var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));//自定義標記圖標

var marker2 = new BMap.Marker(point, {icon: myIcon}); //標記點使用圖標

map.addOverlay(marker2);//添加標記點

var infoWindow = new BMap.InfoWindow("<p>地址詳細信息</p>");//窗口

marker2.addEventListener("click", function(){ //點擊標記點

this.openInfoWindow(infoWindow); // 彈出窗口

});

map.removeEventListener("click", functionA);刪除監聽事件

map.addEventListener("click", functionA);添加監聽事件

更多功能：實時路況 全景圖 鼠標繪制點線面

總結

以上是生活随笔為你收集整理的插件使用 之 Bmap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。