Blog

百度地图API实例——我的旅行足迹

By @hduzn•1/19/2018•api

需求：因为想到那些个旅行APP都会有点亮足迹的功能，百度地图也有足迹的功能；所以自己想对自己走过的地方做一个标记，因为需求简单，只想记录下省份、城市，并不要那些很细小的县、景点之类，所以决定自己写个页面挂博客上。

功能：将旅行走过的省份点亮，鼠标点击时显示省份及到过的城市。

效果预览：http://www.i007it.com/blog/tr_foots.php

早前玩微信的公众号开发的时候，也接触到百度地图API了，所以知道直接去百度地图的开放平台上找资料就行了。因为是Web开发，目前并不涉及手机端（ios, android）的，所以手机端的功能暂时不照顾。

下面三个网址，用来了解、查询资料的（其实只要知道第一个就行了）：

百度开放平台：
http://lbsyun.baidu.com/index.php?title=jspopular

里面有完整、详细的开发指南，也提供了"Hello World"示例（一个demo）。

示例DEMO：
http://developer.baidu.com/map/jsdemo.htm#a1_2

里面有很多示例，基本上直接在demo上修改就行了。也可以在这里的源代码编辑器上直接修改、运行，进行调试。

JavaScript API 类参考v2.0：
http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB

方便查询每一个类，以及类的方法那些。

步骤：

一、地图常规设置

1、直接把"Hello World"示例拿过来用。

2、初始化地图，设置中心点坐标和地图级别
用Map类的centerAndZoom方法。可以在类参考中找到这个类的方法。
map.centerAndZoom(new BMap.Point(106.403765, 33.914850), 5);

默认的中心点坐标是北京的坐标，可以自己调整。
地图级别3-19级，你自己改一下级别就懂了，就是显示的地图大小。

3、启用滚轮放大缩小
用Map类的enableScrollWheelZoom方法，默认是禁用的。
map.enableScrollWheelZoom(true);

4、定制个性地图
在开发指南中直接有具体的介绍，然后用Map类的setMapStyle方法设置下就行了。

二、区分行政区域

因为默认地图上省份之间只有一些虚线，为了更明显的一目了然，就想着把省份弄成一块一块的。这里就用到了多边形覆盖物。百度在DEMO里也已经有提供例子，直接自己看就行：
http://developer.baidu.com/map/jsdemo.htm#c1_10

主要是这个循环：

    for (var i = 0; i < count; i++) {
    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
    map.addOverlay(ply); //添加覆盖物
    }

然后建立个数组，把全国的省份都添加进去，做个循环，一个个省份都画一下就行。

三、点亮省份

其实这个功能跟上面区分行政区域的功能差不多，只是在建立多边形覆盖物的时候多了一个参数。然后建立一个旅行过的省份的数组。

    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000", fillColor:"#ff0000"});

可以看看覆盖物类中Polygon这个类，因为在里面看到了setFillColor的方法，所以就自己直接把参数加上去试了下，果然没错。

四、点击所有省份显示省份名

这是一个鼠标点击的事件，可以先看DEMO：
http://developer.baidu.com/map/jsdemo.htm#h0_4

当然，这里是整个地图的监听事件，我们只需要把它移植过去，变为Polygon的点击事件就行。

点击事件中，可以获取到当前点击的经纬度坐标，那就需要用到一个类——Geocoder类，这个类可以通过坐标点反向获取省市区街道。

    var myGeo=new BMap.Geocoder();
    myGeo.getLocation(new BMap.Point(e.point.lng,e.point.lat),function(result)
    {alert(result.addressComponents.province+","+result.addressComponents.city);});

五、点击点亮的省份显示省份以及旅行城市名

因为已经可以通过坐标获取到省份，那再建个字典就可以通过获取到的省份，得到旅行的城市名。当时，事前，我们要先建个字典，把点亮的省份为了key，其对应到过的城市作为value。例如：

    var citys = new Array();
    citys["福建省"] = "厦门市";
    citys["江苏省"] = "南京市，苏州市";

因为直接声明的是全局变量，所以在函数里可以通过**window.citys["福建省"]**这样来使用。

PS.手机端访问没有点击效果，因为这个覆盖物，可以自己尝试解决。

完整源码下载：
https://github.com/hduzn/own_code/blob/master/travel_footsteps.php

1

comments