百度地图(多点定位+聚合)

(学习留存,如有侵权,请告知,立刻删除!)

首先页面引用必须的两个JS

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的Key值"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

页面就很简单就一个DIV搞定:

<div id="containerProduct"></div>

下面的才是重点:

首先我们要初始化地图以及定义一些全局变量:

 

行政区域的JS:

既然已经初始化地图了,那下面当然就是获取数据啦:

数据的格式如下:

 

IsFirst一开始默认是true,到后面查询数据或筛选数据的时候在把IsFirst设为false,使它执行else中的代码-清除所有标注和聚合以及清空marker数组(这样写的作用是直接清除地图上的标注,而不用去重新初始化地图来重置标注,节省了性能以及提高了用户使用体验度)。

获取到了数据之后就是生成标注了:

这里有个JS的Each循环的小坑,i和k在这里都是没有用的,但是我们又不能去掉,因为Each必须是两个参数。汗颜!

点聚合方法:

标注单击事件:

单击之后的信息窗口:

opts为(这里只是部分而已,全部太长了所以就粘出来了):

到这里基本就完成了!

哦!对了,还有查询和筛选数据的方法呢!

现在才是大功告成的时候!下面是效果图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值