Vue使用百度地图

百度地图开放平台 https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

 javaScript API https://lbs.baidu.com/index.php?title=jspopularGL

 百度地图实例 https://lbsyun.baidu.com/index.php?title=open/jsdemo

Vue Baidu Map文档 https://dafrok.github.io/vue-baidu-map/#/zh/index 

在Vue中 我们可以使用 Vue Baidu Map来构建我们的地图应用,上面这个是中文文档。

在开始之前我首先申请了密钥:百度地图开放平台  -> 控制台 -> 应用管理 -> 我的应用 -> 创建应用

Vue使用百度地图_第1张图片

1. 安装 

$ npm install vue-baidu-map --save

2. main.js 全局引入注册 

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

3. 组件中使用 




效果: 

参考:

https://www.jianshu.com/p/be11e4d4d626

vue-baidu-map  使用("踩坑")

你可能感兴趣的:(前端,vue,前端)