vue 中百度地图的使用

vue 中百度地图的使用

1. 安装使用

1.安装 vue-baidu-map 官网地址

npm install vue-baidu-map --save

2. 在 main.js 中引入

//main.js
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: ''  //  在此输入你自己的百度地图ak
})

注意这里申请 key 的时候 需要去申请浏览器端的 key 而不是服务器端的

3. 在需要的页面使用

<template>
    <baidu-map class='bm-view' @ready='init' :center="mapData.center" :zoom="mapData.zoom"></baidu-map>
</template>
<script>
import coordinateTrans from "../utils/coordinateTrans.js"
export default {
    data() {
        return {
            //地图数据
            mapData: {
                //中心坐标
                center: { lng: 0, lat: 0 },
                //缩放级别
                zoom: 13
            },
            //BMap类
            BMap: null,
            //地图对象
            map: null
        }
    },
    mounted() {
    },
    methods: {
        async init({ BMap, map }) {
            //保存百度地图类
            this.BMap = BMap
            //保存地图对象
            this.map = map;
            let xy = coordinateTrans.WGS84toBD([114.35567, 30.52922]);
            let point = new BMap.Point(xy[0], xy[1])  //设置城市经纬度坐标
            map.centerAndZoom(point, 15)    //
            map.setCurrentCity('武汉')   // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true)    //鼠标滚动缩放
            map.setMapStyleV2({
                styleId: ''
            });
        }
    }
}
</script>

这里的地图样式，官网自行去弄即可

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 方法