vue 百度地图实现标记多个maker，并点击任意一个maker弹出对应的提示框信息，（附：通过多个地址，标记多个marker 的方法思路）

2023-08-06 21:22:28

通过点击不同筛选条件，筛选出不同企业所在的地点，根据每个企业的经纬度在地图上标记多个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；

码农公寓