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

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

  1. 百度地图marker点击任意一个当前的变化,其余的marker不变

    百度地图marker点击任意一个当前的变化,其余的marker不变 最近做的百度地图,遇到一个问题,就是在for循环里面执行marker的点击事件 没有可以比对的对象,每次点击marker的时候,i都 ...

  2. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

  3. vue + 百度地图api

    主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...

  4. vue & 百度地图:使用百度地图

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. vue百度地图插件

    安装 npm i --save vue-baidu-map 代码 <template> <div> <baidu-map v-bind:style="mapSt ...

  6. 3.0+百度地图在地图初始化的时候就弹框展示一个信息框,而不是用户点击poi时才弹出

    有些时候我们会有这样的业务:当用户根据地址跳转到地图后,希望能够立即弹框展示该poi的地址信息. 实现方法: 百度地图3.0+的类BaiduMap中提供了一个方法showInfoWindow(Info ...

  7. Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...

  8. elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字

    elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...

  9. vue 百度地图多标注展示和点击标注进行的提示

    index.html中加入script <script type="text/javascript" src="http://api.map.baidu.com/a ...

随机推荐

  1. python - 包装 和 授权

    包装 # 包装(二次加工标准类型) # 继承 + 派生 的方式实现 定制功能 # 示例: # class list_customization(list): #重新定制append方法,判断添加的数据 ...

  2. JobService相关

    1.在构建JobInfo时,如果设置setPersisted(true),则需要应用申请RECEIVE_BOOT_COMPLETED权限. 这个权限只需要在应用首次安装时被授予,后面覆盖安装时便会默认 ...

  3. js遍历对象的方法

    1. for ... in 语句 for (let variable in object)  { ... } https://developer.mozilla.org/zh-CN/docs/Web/ ...

  4. Servlet3.0的注解自定义原生Listener监听器实战

    简介:监听器介绍和Servlet3.0的注解自定义原生Listener监听器实战 自定义Listener(常用的监听器 servletContextListener.httpSessionListen ...

  5. Linux MMC framework2:基本组件之core

    1.前言 本文主要core组件的主要流程,在介绍的过程中,将详细说明和core相关的流程,涉及到其它组件的详细流程再在相关文章中说明. 2.主要数据结构和API TODO 3. 主要流程 3.1 mm ...

  6. Ex 6_3 修建酒店所获得的利润..._第五次作业

    假设profit[i]为在前i个位置修建酒店所获得的最大利润,当i=0时,profit[0]=0.当i>0时,若j为上一个满足m[i]-m[j]k的位置.若profit[i-1]>prof ...

  7. Java发送邮件时标题和发件人乱码

    最近碰到一个问题,Java发送邮件时,查看邮箱结果,发件人及邮件标题正文全部乱码 通过翻阅资料,原因及解决方法如下: // Set Subject: 头字段 message.setSubject(Mi ...

  8. html中子界面与父界面相互操作或传值

    一.在使用iframe的页面,要操作这个iframe里面的DOM元素可以用: contentWindow.contentDocument(测试的时候chrom浏览器,要在服务器环境下) content ...

  9. gulp-px2rem-plugin 插件的一个小bug

    最近在使用这个插件的过程中发现一个bug: 不支持 含有小数的形式. 查看源码后,修改了下其中的正则,使其支持小数形式(66.66px..6px ). 作者的源码最近一次更新都在两年前,所以就简单的记 ...

  10. 淘淘商城 本地仓库配置和仓库jar包下载

    SVN服务器的搭建请查看该文:<Win7 x64 svn 服务器搭建> 1:仓库包存放位置: 2:setting.xml 文件配置信息 <?xml version="1.0 ...