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

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

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

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

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

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

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

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

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

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

  9. vue 百度地图

    <template lang="pug"> #select-area-in-map-content #show-message-info el-popover(plac ...

随机推荐

  1. 自定义Property属性动画

    同步发表于 http://avenwu.net/customlayout/2015/04/06/custom_property_animation/ 代码获取 git clone https://gi ...

  2. 蜗牛历险记(二) Web框架(中)

    上篇简单介绍了框架所使用的Autofac,采用Autofac提供的Ioc管理整个Web项目中所有对象的生命周期,实现框架面向接口编程.接下来介绍框架的日志系统. 一.介绍之前 框架日志是否有存在的必要 ...

  3. windows系统中的dll的作用详细解释

    什么是.DLL文件? DLL 是一个包含可由多个程序同时使用的代码和数据的库.例如,在 Windows 操作系统中,Comdlg32 DLL 执行与对话框有关的常见函数.因此,每个程序都可以使用该 D ...

  4. 【转】MySQL— pymysql and SQLAlchemy

    [转]MySQL— pymysql and SQLAlchemy 目录 一.pymysql 二.SQLAlchemy 一.pymysql pymsql是Python中操作MySQL的模块,其使用方法和 ...

  5. 队列 Queue JoinableQueue

    from multiprocessing import Process, Queue def f1(q); for  i   in range(10): q.put(i) def f2(q): whl ...

  6. WebRTC 源码分析(四):VideoCRE 与内存抖动优化

    WebRTC 是个宝,初窥这部分代码时就被它的 Capturer 类的设计惊艳到了,仔细品鉴后越发佩服起来,里面简直填了太多坑了,如此宝贝,如不能为我所用,岂非一大憾事!而前三篇的解读,正是为了今天能 ...

  7. iOS app开发入门

    https://github.com/qinjx/30min_guides/blob/master/ios.md

  8. 移动端车牌识别/车牌OCR识别

    周末,小编约了朋友商场shopping. 开车进地下车库时,“滴”的一声,完成车牌录入:开车离开时,扫描二维码,输入车牌,完成停车收费.小编不禁感叹科技改变生活,人工智能给生活带来的便利. 车牌自动识 ...

  9. Codeforces 918C The Monster(括号匹配+思维)

    题目链接:http://codeforces.com/contest/918/problem/C 题目大意:给你一串字符串,其中有'('.')'.'?'三种字符'?'可以当成'('或者')'来用,问该 ...

  10. websphere设置jvm参数

    http://www.quiee.com.cn/archives/592/ websphere 选择服务器-> 应用程序服务器-> Server1-> 进程定义->Java 虚 ...