百度地图API入门使用

百度地图js开发API

本文将结合具体项目案例，带你初步认识百度地图API的使用方法

部分项目需求

• 中间为地图区，地图区上显示的点位与左侧检索区对应
• 配电箱状态为报警时，点位跳动，图标变为红色
• 定时更新配电箱状态，界面上的点相应更新
• 点击左侧检索结果的配电箱,或者点击地图区配电箱图标，在地图区显示配电箱详细信息

设计稿

效果图.jpg

具体操作

1. 引入js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

关于如何申请密钥请参照百度地图API密钥申请

2. 初始化地图，设置中心点等参数。

var map = new BMap.Map("allmap");// 创建Map实例。
//'allmap'为html节点的id，建议放于body节点下
var pointCenter = new BMap.Point(120.204892, 30.161293); //创建点
map.centerAndZoom(pointCenter, 12); //中心点
map.enableScrollWheelZoom(true);  //支持鼠标滚动缩放

地图中心点也可以直接使用城市名称。后面的数字为深度，12表示市级深度

map.centerAndZoom('杭州', 12);

3. 调用查询接口，返回配电箱列表信息，获取每个配电箱的经纬度，并在地图上创建点。如果配电箱状态为报警，则让该点跳动

var point = new BMap.Point(lo, la); //创建点
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);               // 将标注添加到地图中

if(该配电箱处于报警状态){
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}

4. 在第一次获取配电箱列表后已经生成了所有的点，而点的坐标从始至终都是不变的，所以在更新状态的时候，并不需要重绘，只需要替换点的图标即可。

//第一次创建点，为其生成默认图标
var myIcon = new BMap.Icon("../statics/images/map/box0.png", new BMap.Size(300,157));   //创建Icon对象
marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注，设置icon

//更新状态时，若状态改变，则替换图标
 if (//配电箱不在线) {
    var icon = marker.getIcon(); //获取icon对象
    icon.setImageUrl('../statics/images/map/box0.png'); //修改图标
 }

5. 如果说页面内的点相对 较分散，可以使用点聚合

• 首先是引入扩展链接

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

• 调用markerClusterer类即可

var markers = [];
for (; i < MAX; i++) {
     pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
     markers.push(new BMap.Marker(pt));
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类。
var markerClusterer = new BMapLib.MarkerClusterer(map,{markers:markers});

点聚合.png

若页面中点很多，会造成页面卡顿，这种情况不建议使用点聚合

6. 为点注册点击事件，并创建信息窗口

var content = "<div>这是一个信息窗口内容</div>"
var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "信息窗口" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
};

var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
marker.addEventListener("click", function(){          
        map.openInfoWindow(infoWindow,point); //开启信息窗口
});

7. 为多个点创建信息窗口

 var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
                 [116.406605,39.921585,"地址：北京市东城区东华门大街"],
                 [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
];
var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "信息窗口" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
           };

for(var i=0;i<data_info.length;i++){
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); 
        var content = data_info[i][2]; //窗口内容
        map.addOverlay(marker);               
        addClickHandler(content,marker);    //为多个点注册事件
}
function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
}
function openInfo(content,e){
        var p = e.target;
        //获取当前点击的点的坐标
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        map.panTo(point); //窗口移动到该点
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
        map.openInfoWindow(infoWindow,point); //开启信息窗口
}

8. 其他
   在完成核心功能后，还能在此基础上做一些优化

• 将生成的所有点都显示在视图窗口内

map.setViewport(pointArray);

• 选中某个配电箱，打开信息窗口，就将该配电箱移动至视图中央

map.panTo(point); //窗口移动到该点

持续更新