vue中引入百度地图API

本文介绍了在Vue项目中如何引入并使用百度地图API,包括两种方法:直接通过`script`标签引入和模块化引入。在直接引入时,由于`document.write`问题导致报错,需要在webpack配置中处理。而模块化引入则可通过`vue-baidu-map`插件方便地集成,安装和使用步骤简单明了。
摘要由CSDN通过智能技术生成

前言

由于项目中需要用到逆地址解析功能及由坐标点(112.54362, 30.2546)转为地址信息(xx省xx市xx县),故考虑用百度地图API进行完成。
项目地址:github
查阅资料有两种方法可以实现。

第一种 直接引入script标签

按照官方的样式在index.html中添加如下代码

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

此时我们还需要告诉webpack,这个是在运行时再去从外部获取这些扩展依赖。
需要在webpack.base.conf.js中设置externals属性,以便可以在vue中进行引用
在这里插入图片描述
接下来就可以在文件中愉快的引用了

import BMap from 'BMap';

在我愉快的写好的代码后,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值