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

Easter79
• 阅读 686

通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个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
3年前
只要两步,用Python将地址标记在地图上!
大家好,在之前的文章中,很多读者私信对如何将商家地址标记到地图上感兴趣👇本文就将讲解,给你一个地址,如何用Python进行可视化,只需要两步:将地址转成经纬度根据经纬度在地图上标记点一、将地址转成经纬度首先我们需要将地理位置转成经纬度这种统一格式,方便代码去识别。完成这一个需求可以使用爬虫通过在线的经纬度转换网站来实现,也可以使用
代码哈士奇 代码哈士奇
3年前
vue实现世界疫情地图(点击进入子地图)
点击进入子地图目前只实现了中国模块数据来源,腾讯实时疫情(https://news.qq.com/zt2020/page/feiyan.htm/global),中国疫情网(https://www.ncovchina.com/data.html)原本只想做中国模块,后来想了想,做个世界的吧使用axios和echarts,elementui的
Karen110 Karen110
3年前
一篇文章带你了解JavaScript switch
Switch是与if...else...相同的条件语句,不同之处在于switch语句允许根据值列表测试变量是否相等。switch语句用于根据不同的条件执行不同的操作。一、Switch语句使用switch语句选择要执行的多个代码块中的一个。1\.语法switch(expression)casen:codeblock
Stella981 Stella981
3年前
Redis的锁
分布式与集群什么是锁在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须
Wesley13 Wesley13
3年前
Unity RPG游戏,场景任务的设计
0:讨论群qq群号:390313628unity4.6版本运行1场景任务的设计参考开源赛达尔传说游戏SolarusDX。每个地图存在一个控制脚本,脚本名字mapxxxxxx为地图ID。地图控制器提供标准接口,进入地图事件处理和退出地图事件处理。每次切换场景地图的时候,加载对应的脚本,脚本挂在一个Game
Stella981 Stella981
3年前
Google Maps Android API v2入门
概述创建一个新的使用了GoogleMapsAndroidAPIv2的Android应用需要许多个步骤。这一节中所概述的其中的许多步骤只是需要必须执行一次而已,但有些信息则是未来应用开发方便的参考。给一个Android应用程序添加一个地图的总体过程如下:1.安装AndroidSDK(https://www.osc
Stella981 Stella981
3年前
LeafLet 简单使用
Leaflet使用最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下。介绍:Leaflet是一个为移动设备设计的交互式地图的开源的javascript库,并只有38k,包含了大多数开发者需要的地图特点。准备:下载leaflet文件
Stella981 Stella981
3年前
Google Map 开发(三):Google Map 地点搜索功能
开发国内应用当我们需要使用到地图时,首选肯定是高德地图或者百度地图,这是因为它们的地图功能足够强大,对于开发人员来说,更是因为API封装的完善和简单的调用实现,扩展功能强大。如果要开发全球通用的APP,需要集成地图,我们难免会对需要使用的地图SDK进行一番调研,百度和高德并没有全世界范围的地图数据,在亚洲或许还能使用以下,对于需要全球范围内都要
Wesley13 Wesley13
3年前
Java分布式锁看这篇就够了
\什么是锁?在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量。而同步的本质是通过锁来实现的。为了实现多个线程在一个时刻同一个代码块只能有一个线程可执行,那么需要在某个地方做个标记,这个标记必须每个线程都能看到
什么是多云互联
什么是?云是云计算领域的新概念。它是指通过互联网在同一台物理服务器上同时运行多个操作系统和数据库系统,从而实现不同应用之间数据的无缝迁移和共享。在传统的企业it系统中,通常有一个或多个独立的应用程序或服务,为用户提供不同的功能和服务。比如:一个网站,一套办
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k