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

Easter79
• 阅读 948

通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个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); // 初始化地图,设置中心点坐标和地图级别

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

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

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

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

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

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

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

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

点赞
收藏
评论区
推荐文章
Irene181 Irene181
4年前
只要两步,用Python将地址标记在地图上!
大家好,在之前的文章中,很多读者私信对如何将商家地址标记到地图上感兴趣👇本文就将讲解,给你一个地址,如何用Python进行可视化,只需要两步:将地址转成经纬度根据经纬度在地图上标记点一、将地址转成经纬度首先我们需要将地理位置转成经纬度这种统一格式,方便代码去识别。完成这一个需求可以使用爬虫通过在线的经纬度转换网站来实现,也可以使用
代码哈士奇 代码哈士奇
4年前
vue实现世界疫情地图(点击进入子地图)
点击进入子地图目前只实现了中国模块数据来源,腾讯实时疫情(https://news.qq.com/zt2020/page/feiyan.htm/global),中国疫情网(https://www.ncovchina.com/data.html)原本只想做中国模块,后来想了想,做个世界的吧使用axios和echarts,elementui的
Wesley13 Wesley13
3年前
Unity RPG游戏,场景任务的设计
0:讨论群qq群号:390313628unity4.6版本运行1场景任务的设计参考开源赛达尔传说游戏SolarusDX。每个地图存在一个控制脚本,脚本名字mapxxxxxx为地图ID。地图控制器提供标准接口,进入地图事件处理和退出地图事件处理。每次切换场景地图的时候,加载对应的脚本,脚本挂在一个Game
Stella981 Stella981
3年前
Google Map 开发(三):Google Map 地点搜索功能
开发国内应用当我们需要使用到地图时,首选肯定是高德地图或者百度地图,这是因为它们的地图功能足够强大,对于开发人员来说,更是因为API封装的完善和简单的调用实现,扩展功能强大。如果要开发全球通用的APP,需要集成地图,我们难免会对需要使用的地图SDK进行一番调研,百度和高德并没有全世界范围的地图数据,在亚洲或许还能使用以下,对于需要全球范围内都要
Wesley13 Wesley13
3年前
Java分布式锁看这篇就够了
\什么是锁?在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须每个线程都能看到
鸿蒙小林 鸿蒙小林
8小时前
《仿盒马》app开发技术分享-- 新增地址(28)
技术栈Appgalleryconnect开发准备上一节我们实现了地图选点,获取当前位置,在地图上添加标记,根据当前的定位获取poi地址列表等功能,这些全部都为了我们这一节而铺垫,这一节我们要实现的是新增地址,把我们的用户信息,填写收件人、门牌号、手机号、经
上海张律师 上海张律师
15小时前
鸿蒙地图功能开发【1. 开发准备】##地图开发##
​对于地图功能的开发,有以下三种思路1.使用鸿蒙官方的MapKit进行开发2.使用第三方地图的SDK(例如高德地图、百度地图)3.做一个基于h5的地图页面,通过Web组件去引入对于这三种方案,每一种都有自己的特点原生的MapKit,目前来看文档是最全面的也
鸿蒙小林 鸿蒙小林
8小时前
《仿盒马》app开发技术分享-- 定位获取(25)
技术栈Appgalleryconnect开发准备上一节我们实现了地址管理页面的数据查询和展示,接下来我们要实现的功能是地址添加相关的,我们想实现的功能是地图选点,那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息,然后
鸿蒙小林 鸿蒙小林
8小时前
《仿盒马》app开发技术分享-- 原生地图展示(26)
技术栈Appgalleryconnect开发准备上一节我们实现了获取当前用户的位置,并且成功的拿到了经纬度,这一节我们就要根据拿到的经纬度,结合我们其他的知识点来实现地图的展示。功能分析地图的展示,我们需要在管理中心先给我们对应的应用开启地图api功能,否
鸿蒙小林 鸿蒙小林
8小时前
《仿盒马》app开发技术分享-- 地图选点(27)
技术栈Appgalleryconnect开发准备上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位功能分析要想实现这些功能,首先我们需要在
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
6
获赞
1.2k