Vue 调用百度地图API

实现效果

1、注册百度地图API账号

2、控制台创建应用 

生成1个AK

3、在index.html中添加百度地图api(引入放在第一行，不然异步加载会失败）

<script type="text/javascript" src="https://api.map.baidu.***/api?v=3.0&ak=你的百度地图AK"></script>

4、创建地图组件 

<template>
  <div id="mapContainer" style="width: 600px;height: 400px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null, // 地图实例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new BMap.Map("mapContainer");
      this.map.centerAndZoom(new BMap.Point(102.710124,25.054646), 21);
      this.map.enableScrollWheelZoom(true);

      // 添加标点
      var point = new BMap.Point(102.710124,25.054646);  // 创建标点
      var marker = new BMap.Marker(point);  // 创建Marker对象
      this.map.addOverlay(marker);  // 将Marker添加到地图上

      // 如果你还想给标点添加名称，可以使用InfoWindow
      var infoWindow = new BMap.InfoWindow("翠湖");  // 创建信息窗口对象
      marker.addEventListener("click", function() {
        this.openInfoWindow(infoWindow);
      });
    },
  },
}
</script>

 5、在其他vue中引入该组件使用即可