百度地图JavaScript API 的运用

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

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

// 加载百度地图js
var 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，意味着当你点击地图上的某个覆盖物时（地铁、公交站，地区等等），不会出现公交、驾驶、等的线路规划窗口，如果不传该参数，默认是能查看线路规划窗口的

百度地图JavaScript API 的运用

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;
}, "全国");

;

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