本文将结合具体项目案例，带你初步认识百度地图API的使用方法
部分项目需求
- 中间为地图区，地图区上显示的点位与左侧检索区对应
- 配电箱状态为报警时，点位跳动，图标变为红色
- 定时更新配电箱状态，界面上的点相应更新
- 点击左侧检索结果的配电箱,或者点击地图区配电箱图标，在地图区显示配电箱详细信息
设计稿
效果图.jpg
具体操作
- 引入js
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
关于如何申请密钥请参照百度地图API密钥申请
- 初始化地图，设置中心点等参数。
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);
- 调用查询接口，返回配电箱列表信息，获取每个配电箱的经纬度，并在地图上创建点。如果配电箱状态为报警，则让该点跳动
var point = new BMap.Point(lo, la); //创建点
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
if(该配电箱处于报警状态){
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
- 在第一次获取配电箱列表后已经生成了所有的点，而点的坐标从始至终都是不变的，所以在更新状态的时候，并不需要重绘，只需要替换点的图标即可。
//第一次创建点，为其生成默认图标
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'); //修改图标
}
- 如果说页面内的点相对 较分散，可以使用点聚合
- 首先是引入扩展链接
<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
若页面中点很多，会造成页面卡顿，这种情况不建议使用点聚合
- 为点注册点击事件，并创建信息窗口
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); //开启信息窗口
});
- 为多个点创建信息窗口
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); //开启信息窗口
}
- 其他
在完成核心功能后，还能在此基础上做一些优化
- 将生成的所有点都显示在视图窗口内
map.setViewport(pointArray);
- 选中某个配电箱，打开信息窗口，就将该配电箱移动至视图中央
map.panTo(point); //窗口移动到该点
持续更新
