插件使用 之 Bmap

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"

href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

<div id="container" style="width: 500px; height: 500px;"></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);      添加監聽事件

 

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