方法一 :使用第三方工具

vue-baidu-map

安装命令:

yarn add vue-baidu-map --save

文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

案例01:https://blog.csdn.net/playboyanta123/article/details/86514891

案例02:https://www.cnblogs.com/wangqi2019/p/11040239.html

为了页面流畅,建议还是局部引用(觉得这三个满足一般的需求了),如下:

import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'

然后注入依赖:

components: {
BaiduMap,
BmGeolocation,
BmScale
},

HTML代码,在需要引入百度地图的地方加入下面代码

    <!--接入百度地图-->
<baidu-map style=" height: 600px;" :center="map_center" :zoom="my_zoom"
:scroll-wheel-zoom="my_scroll_wheel_zoom"
class="baidu-map-view"
@ready="map_handler" ak="分配给你的百度key">
</baidu-map>

如果没有百度地图key就去申请一个,申请网址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

如果需要对地图进行事件处理,必须要在ready事件之后,否者取不到BMap对象!

ready 是在地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例——{BMap, map}。百度地图组件是异步加载,不要在组件的生命周期中访问 BMap 核心类和 map 实例,如有需要,请在所需组件的 ready 事件回调函数的参数中获取。

看代码:

	  // 地图初始化回调
map_handler({ BMap, map }) {
this.BMap = BMap
this.map = map
},

其中,BMap是百度地图的对象,直接new出来跟原始的百度地图API一样使用,map是地图对象,可以调用对应的地图方法,比如添加坐标点等。

获取到地图的BMap和map之后,剩下的操作就可以直接参照百度地图官方api接口了,对,就是这样子。

百度地图官方api demo:http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

小案例(给地图设置点击获取经纬度坐标并标点):

		this.map.addEventListener('click', (e) => {
const point = new this.BMap.Point(e.point.lng, e.point.lat)
const marker = new this.BMap.Marker(point) // 设置点击位置
map.clearOverlays() // 清空地图上其他红色位置标识
map.addOverlay(marker) // 添加指定点
})

希望对你有用!

方法二:引入百度地图JS

在 index.html 添加百度地图的 script

<script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地图秘钥(ak)&callback=bMapInit"></script>

webpack.base.conf.js添加externals配置,内容如下,与entry平级:

  entry: {
app: ['babel-polyfill', './src/main.js']
},
externals: {
'BMap': 'BMap'
},

在调用百度地图的组件中引用:

import BMap from 'BMap'

在需要接入地图的界面引入地图

<div id="map-core"></div>

然后就可以写方法进行逻辑操作

this.map = new BMap.Map('map-core')
this.map.centerAndZoom(new BMap.Point(113.275, 23.117), 10)

然后就可以根据百度地图官方api进行逻辑编写。

希望对你有用!

vue项目接入百度地图的更多相关文章

  1. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  2. Vue项目引入百度地图

    先去百度开放平台申请ak.http://lbsyun.baidu.com/ 进来之后 按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥 填写完毕后提交,会给你邮箱发个激活邮件 点击申请 ...

  3. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  4. vue项目,百度地图api高亮选取区域,高亮某个地区,行政区域等

    效果如下: var blist = [] ,maxZoom: });// 创建地图实例 var point = new window.BMap.Point(89.48,31.57); map.cent ...

  5. 原有vue项目接入typescript

    原有vue项目接入typescript 为什么要接入typescript javascript由于自身的弱类型,使用起来非常灵活. 这也就为大型项目.多人协作开发埋下了很多隐患.如果是自己的私有业务倒 ...

  6. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  7. ol 接入百度地图

    ol5 如何接入百度地图,网上的资料很多,但是大多都有问题,在级别放大时,地图发生扭曲.为此注重研究了下ol5 接入百度地图的方法. 首先明确以下问题: 百度地图的投影是3857. 百度地图的分辨率和 ...

  8. Vue项目接入MQTT

    Vue项目接入MQTT 安装mqtt库 npm install mqtt --save Vue代码实现 <template> <div id="app"> ...

  9. vue项目接入markdown

    vue 项目接入 markdown 最近做一个项目,需要在vue项目中接入 markdown 编辑器,其实这个好接,他没有什么特别的样式,男的就是图片的上传. 今天给大家推荐一个插件 :mavonEd ...

随机推荐

  1. javascript控制台 js的调试

    一.错误查询,按F12键,点击控制台.

  2. C 库函数 - sprintf()

    C 库函数 - sprintf() C 标准库 - <stdio.h> 描述 C 库函数 int sprintf(char *str, const char *format, ...) 发 ...

  3. 2019牛客多校第一场H XOR 线性基模板

    H XOR 题意 给出一组数,求所有满足异或和为0的子集的长度和 分析 n为1e5,所以枚举子集肯定是不可行的,这种时候我们通常要转化成求每一个数的贡献,对于一组数异或和为0.我们考虑使用线性基,对这 ...

  4. [CF2B] The least round way - dp

    给定由非负整数组成的n×n 的正方形矩阵,你需要寻找一条路径: 以左上角为起点 每次只能向右或向下走 以右下角为终点 并且,如果我们把沿路遇到的数进行相乘,积应当是最小"round" ...

  5. springBoot 发送邮件图片不显示

    解决方案 MimeMessageHelper 的执行顺序错了,先执行 setText() 然后执行 addInline() 添加图片 <img src="cid:p03"/& ...

  6. 开放系统互联(OSI)模型

    开放系统互联(OSI)模型 是由国际标准化组织(ISO)于1984年提出的一种标准参考模型,是一种关于由不同供应商提供的不同设备和应用软件之间的网络通信的概念性框架结构.它被公认为是计算机通信和 in ...

  7. JDBC未知列

    Exception in thread "main" com.mysql.jdbc.exceptions.jdbc4. MySQLSyntaxErrorException: Unk ...

  8. react 和 vue 的优缺点总结

    React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就 ...

  9. [Web安全]SQL注入

    Web网站最头痛的就是遭受攻击.Web很脆弱,所以基本的安防工作,我们必须要了解! 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意 ...

  10. php server整理

    $_SESSION['PHP_SELF'] -- 获取当前正在执行脚本的文件名. $_SERVER['SERVER_PROTOCOL'] -- 请求页面时通信协议的名称和版本.例如,“HTTP/1.0 ...