vue项目使用百度地图插件

vue项目使用百度地图插件

安装百度地图插件

 "map": "^1.0.1",
    "vue-baidu-map": "^0.21.22",

在src下新建bmpgl.js内容如下

export function BMPGL(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        // eslint-disable-next-line
        resolve(BMapGL)
      }
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
}  

新建页面

 <div id="container"></div>

引入BMPGL

import { BMPGL } from "@/bmpgl.js"

data () {
return {
ak: “你的ak”, // 百度的地图密钥
myMap: null
}
},
mounted () {
this.initMap()
},
methods:{
initMap(){
// 传入密钥获取地图回调。
BMPGL(this.ak).then((BMapGL) => {
// 创建地图实例
let map = new BMapGL.Map(“container”);
var point = new BMapGL.Point(116.404, 39.915);
var point1 = new BMapGL.Point(116.404, 39.917);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 19)
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true)
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(0); //设置地图的倾斜角度
// 保存数据
// this.myMap = map
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
var marker = new BMapGL.Marker(point);
var marker1 = new BMapGL.Marker(point1); // 创建标注
map.addOverlay(marker);
map.addOverlay(marker1);
})
.catch((err)=>{
console.log(err)
})

 }