在 Vue 项目中使用百度地图 API 接口 - 文章教程

在 Vue 项目中使用百度地图 API 接口

发布于 2018-10-24 字数 2179 浏览 3005 评论 0

直接在 Vue 项目里面调用百度地图 API 是不成功的,不知道是不是我代码写的有问题,不过通过下面的方法肯定能很优雅的使用百度地图。

在 Vue 项目中使用百度地图 API 接口

申请百度地图密钥

JavaScript API v1.4 以及以前的版本无序申请秘钥(ak),自 v1.5 版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请认证企业用户。百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key

添加百度地图 JavaScript API 接口

<script src="http://api.map.baidu.com/api?v=1.4"></script>
//v1.4版本以及以前版本
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
//1.5版本,需要秘钥

配置 webpack.base.conf.js 文件

在 webpack.base.conf.js 配置文件中配置BMap,在 module.exports 中与 entry 平级,如果还有其他的,同样在下面引入就可以了,比如自定义覆盖物 BMap_Symbol_SHAPE_POINT 等。配置完成以后需要重新 npm run dev 才可以正常运行。

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals: {
    'BMap': 'BMap',
    'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
  },

编写 HTML 代码

在组件中创建一个容器,用来显示百度地图(宽高最好都是100%)

<div class="baidumap" id="allmap">
</div>

引入 BMap 实例

在地图组件中 import BMap,否则会出现 BMap undefined,还有这个 BMap_Symbol_SHAPE_POINT,因为是用 _ 连字符,会报错让你这个没有用驼峰命名。所以引入时,把这个连字符去掉就行了。

import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

创建地图对象

创建地图对象,在 mounted 生命周期调用

mounted () {
  this.baiduMap()
},
methods: {
  baiduMap () {
    var map = new BMap.Map('allmap')
    var point = new BMap.Point(111.742579, 40.818675)
    map.centerAndZoom(point, 12)
    var marker = new BMap.Marker(point)
    map.addOverlay(marker)
  }
}

基本就这样使用了,百度地图里面有一些方法是异步的,所以在编写代码的时候要考虑到延迟或者回调函数中执行。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论