百度地图加载空白颜色_本地地图标点的html实现

地图批量标点的实现方法有很多，也有很多网站支持直接Excel上传数据进行标点的。比如地图无忧等。但都是软收费的模式(要么有使用期限，要么有数量限制)，后来在查找资料的过程中，发现了一个在本地可以实现地图标点的方式。其实现步骤如下。

1. 样例介绍

本地地图批量标点是基于百度地图中的“加载海量点”样例的。样例地址是：http://lbsyun.baidu.com/jsdemo.htm#c1_19，其网站样例如图1-1所示。

图1- 1

本次目标的实现就是基于此样例来实现。

2. 创建本地文件

在百度样例中，选中全部样例代码，复制，然后再本地创建一个空白的html文件，并将其粘贴进去，保存(我个人使用的是notepad++)。此时保存好的文件如图1-2所示。

图1- 2

3. 修改页面代码并放入数据

(1)首先需要修改的就是要将百度地图的引入api地址补充完整。样例中的地址如图1-3所示。

图1- 3

这里需要在src属性里面增加“http”，不然后面出不来图。同时也要将自己的百度地图ak填写到对应的位置。

(2)其次是要设置中心点坐标和地图级别，对应的样例中的代码位置如图1-4所示。

图1- 4

Bmap.Point()里面的参数是GPS坐标，map.centerAndZoom()的第二个参数就是地图级别，可以根据自己的需求设置。数值设置越大显示的越详细。

(3)再次是要将需要标点的数据加入到样例中，位置如图1-5所示。

图1- 5

这里呢，需要将数据整理成key-value格式，然后放入到points中。整理好得数据如图1-6所示。

图1- 6

(4)调整监听事件。这个作用就是如果需要了解标点的信息，那么鼠标点击对应的点，就会显示出来详细信息。样例中的位置如图1-7所示。

图1- 7

调整信息可以根据上面points里面的信息进行调整，可以选择哪些显示，哪些隐藏。调整之后的监听事件样例代码如图1-8所示。

图1- 8

(5)上述操作完成之后保存一下，然后使用浏览器打开，显示如图1-9所示。

图1- 9

其中红框内的是刚才points里面加入的三个点，中心位置就是步骤(2)里面设置的位置。然后可以使用鼠标滚轮进行放大或者缩小，可以使用鼠标左键点击已经标注的点，点击之后效果如图1-10所示。

图1- 10

至此，本地地图标点的目标通过html的方式，一个文件就可以实现了。

4. 后续

上述功能实现之后，后面可以根据官方文档提供的功能进行细化调节，比如说点的形状、大小、颜色，地图的样式等等。

-----------------------------------------------------

感谢查阅，还请“三连”支持一下