百度地图JavaScript API 的运用

         最近在项目中用到了地图，包含了移动标注修改坐标位置，点击标注弹出提示框等等功能，在这里我就对百度地图的一个简单运用进行分享一下：

1.首先加载百度地图JS，在引用的时候需要用到自己的百度地图ak秘钥,这里我就用*号代替我的秘钥的显示了，各位使用自己的秘钥ak，具体如何生成秘钥ak，详情见百度地图      JavaScriptAPI----->获取秘钥。这里的秘钥指的就是ak码，具体如下：

// 加载百度地图jsvar script = document.createElement("script");script.src = "http://api.map.baidu.com/api?v=2.0&ak=***************" +    "*********"; //这种方式为v2.0版本的引用方式document.body.appendChild(script);

2.创建一个地图实例（在创建地图实例的时候，如果报BMap is not defined的话，则证明百度地图的JS还没有加载完成，创建地图实例需要加一个延时setTimeout，当然，也有可能是网络状态不佳）：

var mapParam.map = new BMap.Map("baiduMap",{enableMapClick: false});

其中的参数baiduMap是显示地图的dom节点的id，

<div id="baiduMap"></div>

第二个参数enableMapClisk设置为false，意味着当你点击地图上的某个覆盖物时（地铁、公交站，地区等等），不会出现公交、驾驶、等的线路规划窗口，如果不传该参数，默认是能查看线路规划窗口的

3. 设置地图的中心点坐标

    point的参数分别为经度和纬度，centerAndZoom的两个参数，第一个参数是创建的点的坐标。第二个参数是设置地图的缩放级别。然后使用maker方法创建标注，当打开地图时。就能看到标注了

var point = new BMap.Point(longitude, mData.latitude); // 创建点坐标
    mapParam.map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
var marker= new BMap.Marker(point); // 创建标注
    mapParam.map.addOverlay(marker); // 将标注添加到地图中

完成上面这三步我们就可以得到一个简单的地图了。这时候我们可以根据我们所需要的功能进行补全：

例：拖拽标注

enableDragging方法和disableDragging方法是两个对立的方法，enableDragging是设置标注可拖动（这常常用来进行拖动定位，在地图上标注出新的位置），disableDragging是用来设置禁止拖动标注的（这一般仅仅只用作位置的标注）,enableScrollWheelZoom方法是用来设置鼠标缩放地图的。

marker.enableDragging(); //可拖map.addOverlay(marker); // 将标注添加到地图中map.enableScrollWheelZoom(true); // 鼠标缩放// map.disableDragging();     //禁止拖拽

例：监听标注的拖拽

marker.addEventListener("onmouseup", function() {    var p = marker.getPosition(); //获取marker的位置     mapParam.longitude = p.lng;    mapParam.latitude = p.lat;    //根据经纬度获得对应的地址    var point = new BMap.Point(p.lng, p.lat);    var gc = new BMap.Geocoder();    gc.getLocation(point, function(rs) {        var addComp = rs.addressComponents;        mapParam.address = addComp.province+addComp.city + addComp.district            + addComp.street + addComp.streetNumber;    });});

例：给标注添加click事件

marker.addEventListener("click", function () {    //事件内容});

例：自定义标注图标

BMap.Icon 的四个参数，第一个参数是图标的位置（如果有多个图标，则使用循环进行设置图标），点击查看默认的百度地图标注，可以做一组自定义的图标，图标的size和图标的大小成比例的，anhor参数是用于设置标注图标停靠的位置，在2.0之前的版本使用的是offset，imageOffset是用来设置图标的偏移量的，

var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",    new BMap.Size(23, 25), {        anchor: new BMap.Size(0, 0),        imageOffset: new BMap.Size(0, 0 - 10* 25)    });   marker = new BMap.Marker(point, { icon: myIcon });   mapParam.map.addOverlay(marker);

例：点击标注弹出信息框

 openInfoWindow方法是用来打开提示窗口的,一般用在标注的click事件里，可以自己修改默认的一些样式，这就看个人怎么定制了

//pop弹窗标题var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' +    title + '</div>';//pop弹窗信息var html = [];html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;' +    'font:12px arial,simsun,sans-serif"><tbody>');html.push('<tr>');html.push('<td style="vertical-align:top;line-height:16px;width:38px;' +    'white-space:nowrap;word-break:keep-all">地址:</td>');html.push('<td style="vertical-align:top;line-height:16px">'+address+ ' </td>');html.push('</tr>');html.push('</tbody></table>');var infoWindow = new BMap.InfoWindow(html.join(""),{ title: title, width:200})marker.openInfoWindow(infoWindow);    

 })

例：地址解析（根据地址解析当前地址的经纬度，可以批量解析）

 

//根据省市区对地址进行解析var latitude = '';var longitude = '';var myGeo = new BMap.Geocoder();var address = '深圳市图书馆'//可以批量解析，只需要把地址放进数组里即可var addressArray = [address];myGeo.getPoint(addressArray, function (point) {    latitude = point.lat;    longitude = point.lng;}, "全国");

;

百度地图还有很多用法，我在这里就不一一叙述了，如果有其它的特性不会用，或者有不明白的朋友欢迎评论留言，大家一起共同探讨