vue 中百度地图的使用
vue 中百度地图的使用
1. 安装使用
1.安装 vue-baidu-map 官网地址
npm install vue-baidu-map --save
- 在 main.js 中引入
//main.js
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: '' // 在此输入你自己的百度地图ak
})
注意这里申请 key 的时候 需要去申请浏览器端的 key 而不是服务器端的
- 在需要的页面使用
这里的地图样式，官网自行去弄即可
2. 修改 api 版本
Vue 项目中使用百度地图，用到了 vue-baidu-map，但是里面用到的 API 是 2.0，api 接口有修改，使用 setMapStyleV2 自定义样式会报错：
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: map.setMapStyleV2 is not a function"
我们需要修改百度地图 api 的版本
在 node_modules 里面的 vue-baidu-map 中去搜索https://api.map.baidu.com/
script.src = https://api.map.baidu.com/apiv=2.0&ak={ak}&callback=_initBaiduMap
改成
script.src = https://api.map.baidu.com/apiv=3.0&ak=${ak}&callback=_initBaiduMap
这样即可使用 setMapStyleV2 方法
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！