index.html中加入script

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=2GRZTukOKUxe25P86mqjHuR1mTahwueb" ></script>
新建map.vue

<template>
<div id="allmap"
class="Map" />
</template> <script>
/* eslint-disable*/ export default {
name: 'Mapbox',
data() {
return {
}
},
mounted: function () {
this.$nextTick(() => {
var map = new BMap.Map("allmap"); //初始化map, 绑定id=allmap
var point = new BMap.Point(121.48789949, 31.24916171); // 初始化point, 给定一个默认x,y值
map.centerAndZoom(point, 10); // 将point点放入map中,展示在页面中心展示,10=缩放程度
map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮 // 如有多个point去展示,可根据后端接口传入为主
let data = [
{ x: 116.297047, y: 39.979542, name: '张三' },
{ x: 116.321768, y: 39.88748, name: '李四' },
{ x: 116.494243, y: 39.756539, name: '王五' }
] data.forEach((e, i) => {
// 创建point, 将x,y值传入
let pointNumber = new BMap.Point(e.x, e.y) // 创建信息窗口对象
let infoWindow = new BMap.InfoWindow("World", {
width: 150, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello" + i // 信息窗口标题
});
// 将data中的name加入地图中
var label = new BMap.Label(e.name, {
offset: new BMap.Size(25, 5)
});
markerFun(pointNumber, infoWindow, label)
}) function markerFun(points, infoWindows, label) {
let markers = new BMap.Marker(points);
map.addOverlay(markers); // 将标注添加到地图中
markers.setLabel(label); // 将data中的name添加到地图中
// 标注的点击事件
markers.addEventListener("click", function (event) {
map.openInfoWindow(infoWindows, points);//参数:窗口、点 根据点击的点出现对应的窗口
});
} // 获取当前地理位置
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// alert('您的位置:' + r.point.lng + ',' + r.point.lat);
} else {
// alert('failed' + this.getStatus());
}
}); })
},
methods: { }
}
</script> <style>
.Map {
height: calc(100vh - 126px);
width: 100%;
}
</style>

  

vue 百度地图多标注展示和点击标注进行的提示的更多相关文章

  1. 【百度地图API】如何快速创建带有标注的地图?——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

  2. 【百度地图API】如何判断点击的是地图还是覆盖物?

    原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...

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

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

  4. 百度地图API,展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

  5. vue + 百度地图api

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

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

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

  7. vue百度地图插件

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

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

    通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口: 说明:  因每个人写法不同.需求不同 ...

  9. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

随机推荐

  1. 将EntityFrameworkCore生成的SQL语句输出到控制台,使用hangfire

    将EntityFrameworkCore生成的SQL语句输出到控制台 参考文档如下 EF Core 日志记录要求使用一个或多个日志记录提供程序配置的 ILoggerFactory. 日志记录-EF C ...

  2. APS.NET MVC + EF (05)---控制器

    Controller(控制器)在ASP.NET MVC中负责控制所有客户端与服务端的交互,并且负责协调Model与View之间数据传递,是ASP.NET MVC框架核心.Controller为ASP. ...

  3. 浏览器解析js

    网页加载js步骤 1.浏览器一边下载html网页,一边开始解析(不等下载完就解析)2.遇到<script>标签,暂停解析,网页渲染的控制权交给javascript引擎3.如果<scr ...

  4. drf--频率组件

    目录 频率组件简介 自定义频率类 内置频率类及局部使用 全局使用 源码分析 SimpleRateThrottle源码分析 频率组件简介 主要是为了限制用户访问的次数,比如某一个接口(发送验证码)同一个 ...

  5. 如何快速找到Chrome配置文件路径,MAC 与window 都适用

    Chrome 的配置文件主要用于存储浏览器的相关配置.书签.扩展插件和密码等,Chrome 配置文件会存储在用户计算机的一个单独文件夹当中,当你升级或重装浏览器时,这些已有配置将可以被完整保存下来. ...

  6. DOS常见命名整理

    Dos命令 1.打开终端的方式 (1).window+R / 点击开始栏,输入cmd,然后回车 (2).在某个文件夹下打开终端 按住shift+右击,有个在此处打开命令窗口 2.修改终端背景和文字颜色 ...

  7. mybatis关联映射一对多

    实际项目中也存在很多的一对多的情况,下面看看这个简单的例子 table.sql CREATE TABLE tb_clazz( id INT PRIMARY KEY AUTO_INCREMENT, CO ...

  8. mmap vs read

    先放个结论: 内存映射通常比随机访问更快,尤其访问的对象是分离的和不可预测的. 内存映射会持续占用pages, 直到完成访问. 这意味当长时间重度使用一个文件很久之前, 然后你关闭了它, 然后再重新打 ...

  9. mysql修改密码策略

      版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/Hello_World_QWP/arti ...

  10. Servlet入门和HTTP。

    Servlet: 1.概念:Servlet:server applet  ,运行在服务器端的小程序.   浏览器在访问服务器的动态资源时,访问的是具有逻辑性的Java代码(Java类),而这里的Jav ...