通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个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. android 解决子线程进行UI操作

    Android确实不允许在子线程中进行UI操作的,但我们有时必须在子线程里去执行一些耗时的任务,然后根据任务的执行结果来更新相应的UI控件. Android提供了一套异步消息处理机制,可以解决子线程中 ...

  2. git命令行工作环境配置【转】

    转自:http://www.cocoachina.com/ios/20171115/21163.html 本文为CocoaChina网友whf5566投稿 前言 笔者一直使用git的图形化工具sour ...

  3. php数据库的增删改查

    1.查询: 数据的显示,这里就可以嵌入php来进行数据的输出 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

  4. c# webbrowser控件内核版本强制修改

    int BrowserVer, RegVal; // get the installed IE version using (WebBrowser Wb = new WebBrowser()) Bro ...

  5. CentOs 6.6里kdump启动失败的原因

    在VMware中新安装了CentOs 6.6,重启系统发现kdump服务启动失败 先来说一下,什么是kdump kdump 是一种先进的基于 kexec 的内核崩溃转储机制.当系统崩溃时,kdump ...

  6. 转载:编译安装Nginx(1.4)《深入理解Nginx》(陶辉)

    原文:https://book.2cto.com/201304/19617.html 安装Nginx最简单的方式是,进入nginx-1.0.14目录后执行以下3行命令:./configuremakem ...

  7. spoj New Distinct Substrings

    vjudge原地爆炸... 题意:求一个字符串不同的子串的个数 策略:后缀数组 利用后缀数组的sa和height两个功能强大的数组,我们可以实现上述操作 首先有个很显然的结论:一个字符串的所有子串=它 ...

  8. MVC开发中的常见错误-04-“System.NullReferenceException”类型的异常在 BBFJ.OA.WebApp.dll 中发生,但未在用户代码中进行处理

    未将对象引用设置到对象实例,又名空指针异常,伴随程序员开发的一生. 查看详细信息得知: SetUserRoleInfo() 首先想到的是  IBLL.IRoleInfoService RoleInfo ...

  9. 基于 OSGi 的面向服务的组件编程,helloworld

    基于 OSGi 的面向服务的组件编程 OSGi(Open Services Gateway Initiative,开放服务网关协议)提供了一个面向服务组件的编程模型,基于 OSGi 编程,具有模块化, ...

  10. IntelliJ IDEA快捷键:Ctrl+Alt+B

    To navigate to the implementation(s) of an abstract method,position the caret at its usage or its na ...