dCtrl = new LegendControl();
map.addControl(legendCtrl);
}
2.5 综合
有了以上函数,综合起来就流程清晰了。以下坐标,均通过坐标拾取器获取。
// 机器类:经度,纬度,名称
function Machine(longitude, latitude, name){
this.longitude = longitude;
this.latitude = latitude;
this.name = name;
}
// 确定地图的中心位置与缩放级别
var center = new BMap.Point(110.423997,31.40979);
map.centerAndZoom(center, 6); // 级别 6,跨省视图
// 添加图例,自由写 html
addLegend("<div style='font-size:12px; color:gray; width:140px; padding:5px; background:white; text-align:center; border:solid 1px gray;'>总部:<img src='head.png' style='width:16px; vertical-align:middle;' /> 设备:<img src='machine.png' style='width:16px; vertical-align:middle;' /></div>");
// 总部位置
var head = { longitude : 112.918702343957, latitude : 28.30070516 };
addMarker(head.longitude, head.latitude, 'head', '总部');
// 所有机器位置
var machineList = [
new Machine(114.876143,38.113315,'石家庄'),
new Machine(112.521289,37.822014,'太原'),
new Machine(108.989008,34.328175,'西安'),
new Machine(117.230997,31.881961,'合肥'),
new Machine(103.984944,30.553819,'成都'),
new Machine(108.400295,22.862517,'南宁'),
new Machine(113.257181,23.169067,'广州'),
new Machine(120.174565,30.298715,'杭州'),
new Machine(102.881106,24.959705,'昆明')
];
// 添加所有机器并连线
for(var i=0; i<machineList.length; i++){
addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
}
3. 结语
本文完整代码可从此处下载:
https://github.com/triplestudio/helloworld/blob/master/baidu_map_demo.html
在此基础上,可以根据需要进一步扩展功能,具体参考百度地图开放平台开发文档:
http://lbsyun.baidu.com/