vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路) 4年前

通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口;

说明:  因每个人写法不同、需求不同, 部分代码 未提供 复制粘贴 需要

参考:  百度地图API

1、初始化地图

this.baiduMap = new BMap.Map("allMap",{minZoom:10,maxZoom:20}); // 创建地图实例

this.baiduMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

this.baiduMap.addControl(new BMap.NavigationControl());

this.baiduMap.addControl(new BMap.ScaleControl());

this.baiduMap.addControl(new BMap.OverviewMapControl());

var point = new BMap.Point(117.183, 39.15); // 创建点坐标

this.baiduMap.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别

2、将获取回来的 经纬度数组 arrList  全部标记marker 在地图上; 

注意!!!: 如果获取回来的是一个 ” 地址 “  数组,  需要将地址数组 arrList  批量转换为经纬度, 批量地址转换成  ip 经纬度的方法:  百度地图API: http://lbsyun.baidu.com/jsdemo.htm#i7\_3;

通过  geocodeSearch  中  getPoint  生成的  ip 经纬度 地址  用 数组 存起来 ,  然后 在进行 后面的操作;

3、在地图上标记完 maker 以后, 并实现点击maker 弹出提示窗口;  要随时注意 addOverlay  与   clearOverlays;

彩虹糖糖
萧萧梧叶送寒声,江上秋风动客情。
6
发布数
4
关注者
11825
累计阅读

热门教程文档

Gin
17小节
Flutter
105小节
C++
73小节
爬虫
6小节
Swift
54小节
广告