VUE2.0版本使用百度地图API

index.vue

<template>
  <div id="baiduMap"></div>
</template>
export default {
  name: 'map',
  mounted() {
      this.initBaiduMap()
  },
  data () {
    return {
      CityInfo: {
        longitude: 104.06, 
        latitude: 30.67
      },
    }
  },
  methods: {
    initBaiduMap() {
      let that = this
      let script = document.createElement("script")
      script.src = "http://api.map.baidu.com/api?v=2.0&ak=zishHhU993mnCRDS3zncmazHuZkIRfti&callback=createMap"
      document.head.appendChild(script)
      window.createMap = () => {
        //创建Map实例
        var map = new BMap.Map("baiduMap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(this.CityInfo.longitude, this.CityInfo.latitude), 11); // 创建点坐标,初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.addControl(new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        }));
        map.addControl(new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        }));
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.enableInertialDragging(); //两秒后开启惯性拖拽
      }
    },
  },
}
</script>