vue页面使用百度地图

vue页面使用百度地图

下载插件

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

编写前端页面

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

引入BMPGL

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

export default {
  name: 'index',
  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)
      })
     }
   }
 }