百度地图开放平台功能强大, 使用简单, 为地图的自定义提供了非常方便的途径!
本文以绘制一张全国机器辐射图为例记录其基本使用方法, 效果如下图:
图中包括了带图标和文本的标注, 连线以及图例.
1. 关于坐标
说到地图, 不得不说坐标.
我以为, GPS 获取经纬度之后, 把经纬度丢给地图就可以了. 但那真的是自以为.
1.1 坐标系
来看看实际情况, 以下是百度开发文档里的描述:
目前国内主要有以下三种坐标系:
WGS84: 为一种大地坐标系, 也是目前广泛使用的 GPS 全球卫星定位系统使用的坐标系.
GCJ02: 又称火星坐标系, 是由中国国家测绘局制订的地理信息系统的坐标系统. 由 WGS84 坐标系经加密后的坐标系.
BD09: 为百度坐标系, 在 GCJ02 坐标系基础上再次加密. 其中 bd09ll 表示百度经纬度坐标, bd09mc 表示百度墨卡托米制坐标.
非中国地区地图, 服务坐标统一使用 WGS84 坐标.
百度对外接口的坐标系为 BD09 坐标系, 并不是 GPS 采集的真实经纬度, 在使用百度地图 JavaScript API 服务前, 需先将非百度坐标通过坐标转换接口转换成百度坐标.
通过 GPS 获取的为 WGS84, 在百度地图上使用前要转换为 BD09, 百度提供了相应的 API 进行坐标转换, 文档地址:
http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn
返回结果:
- {
- status : 0,
- result :
- [
- {
- x : 114.23074871003,
- y : 29.579084787993
- }
- ]
- }
具体还可参考下这篇文章: https://www.cnblogs.com/yesicoo/p/4668642.html
1.2 坐标拾取器
如果坐标是静态的, 或测试用, 可以直接通过百度地图提供的 "坐标拾取器" 工具来获取经纬度.
工具地址:
点哪就获取哪的坐标, 此坐标不用再转换, 复制过来即可以使用.
2. 开始应用
2.1 准备图标
有好些站点可以下载图标, 如: https://easyicon.net/ , 可以获取一些图标文件. 至于商用的要求则要看看站点说明.
如下图, 这里准备总部与机器的图标下载保存为 head.PNG,machine.PNG.
2.2 开启百度地图
地图 API 的使用需要先申请一个 ak, 为了体验方便, 这里已经申请了一个可以直接使用的 key, 在页面中可直接加入以下引用.
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn"></script>
使用以下语句, 定义全局的地图对象
- // 百度地图 API 功能对象
- var map = null;
- if (BMap) {
- map = new BMap.Map("allmap"); // id=allmap 的容器内显示
- map.enableScrollWheelZoom();
- }
2.2 标注: 图标与文本
标注使用 BMap.Marker, 可以为其指定 Icon 与 Label. 为了方便后续使用, 本例定义以下函数, 指定位置, 图标 (本例中可用已经下载的图标 head,machine) 以及文本即可.
- /**
- * 指定经纬度, 图标, 标注文本
- * 在地图上添加标注
- * longitude 经度
- * latitude 纬度
- * icon 图标
- * text 标注文本
- **/
- function addMarker(longitude, latitude, icon, text) {
- if (!map) return;
- var point = new BMap.Point(longitude, latitude);
- var myIcon = new BMap.Icon(icon + ".png", new BMap.Size(32, 32));
- // 指定位置及标注的图标
- var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
- if(text){
- var label = new BMap.Label(text, { offset: new BMap.Size(32, -16) });
- marker.setLabel(label);
- }
- // 添加到地图上
- map.addOverlay(marker);
- }
2.3 连线
连线实际使用的是绘制多边形的功能, 只是当只指定了两个点时, 就是一根线. 同样, 这里定义一个函数以方便直接调用.
- /**
- * 指定起止经纬度, 绘制连接线
- *
- * longitudeFrom 经度
- * latitudeFrom 纬度
- * longitudeTo 经度
- * latitudeTo 纬度
- **/
- function addLine(longitudeFrom, latitudeFrom, longitudeTo, latitudeTo) {
- if (!map) return;
- var pointFrom = new BMap.Point(longitudeFrom, latitudeFrom);
- var pointTo = new BMap.Point(longitudeTo, latitudeTo);
- // 可以指定多点连接, 此处只考虑两点
- var line = new BMap.Polyline([pointFrom, pointTo], { strokeWeight:1, strokeOpacity:0.5, strokeColor:"red" });
- // 添加到地图上
- map.addOverlay(line);
- }
2.4 图例
图例需要以地图定义的控件方式来添加, 在控件的 initialize 事件中完成 DOM 元素的生成即可, 为了体现过程本身, 以下函数把 DOM 的 HTML 文本作为参数, 由外部灵活定义.
- /**
- * 添加图例
- * 实质就是在地图上添加自己的页面元素
- *
- * HTML 网页元素
- **/
- function addLegend(HTML){
- var LegendControl = function () {
- this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
- this.defaultOffset = new BMap.Size(10, 10);
- }
- LegendControl.prototype = new BMap.Control();
- LegendControl.prototype.initialize = function (map) {
- var le = $(HTML)[0];
- map.getContainer().appendChild(le);
- return le;
- };
- var legendCtrl = 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. 结语
本文完整代码可从此处下载:
在此基础上, 可以根据需要进一步扩展功能, 具体参考百度地图开放平台开发文档:
http://lbsyun.baidu.com/
来源: https://www.cnblogs.com/timeddd/p/10919033.html