通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个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常用网络请求框架Volley Retrofit (okHttp)

    Android系统中主要提供了两种方式来进行HTTP通信,HttpURLConnection和HttpClient.在 Android 5.0 的时候 Google 就不推荐使用 HttpClient ...

  2. 超详细的Web前端开发规范文档

    规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合 ...

  3. python中的这些坑,早看早避免。

    python中的这些坑,早看早避免. 说一说python中遇到的坑,躲坑看这一篇就够了 传递参数时候不要使用列表 def foo(num,age=[]): age.append(num) print( ...

  4. 【转】Oracle 11g安装图文攻略

    一.Oracle 下载     注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要出现中文,也不要出现空格等不规则字符. 二.Oracle安装     1. ...

  5. centos7下配置saltstack

    1.下载 使用yum方式即可,可以更换下yum源,这里使用的阿里云的 [root@salt-master ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo h ...

  6. 【一通百通】c/php的printf总结

    程序语言都是触类旁通的,讲人话就是[一通百通].so今天说说工作中常用的printf的用法吧. 1.先说说PHP printf()函数: printf()函数的调用格式为: printf(" ...

  7. Navicat Premium

    Navicat Premium Navicat Premium,一个专门用于操作各种数据库的工具,oracle,sql server,mysql,db2,access等等 下载链接:https://d ...

  8. numpy 广播

    http://blog.csdn.net/hongxingabc/article/details/53149655 https://zhuanlan.zhihu.com/p/20878530

  9. hdu1024线性dp

    /* dp[i][j]表示取第i个数时分成了j块 要么是将第i个数加入j块中的最后一块,要么是自成一块,加上前面j-1块的和 状态转移方程: dp[i][j]=max(dp[i-1][j]+a[i], ...

  10. poj2828 伸展树模拟

    用伸展树模拟插队比线段树快乐3倍.. 但是pojT了.别的oj可以过,直接贴代码. 每次更新时,找到第pos个人,splay到根,然后作为新root的左子树即可 #include<iostrea ...