插件使用 之 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=" 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);      添加监听事件

更多功能：实时路况 全景图 鼠标绘制点线面