vue项目中引入百度地图实现打点

效果如下所示：

步骤一：npm install vue-baidu-map -save

步骤二：index.html中引入密匙链接

       <script src="http://api.map.baidu.com/api?v=2.0&ak=WQt3zDANG8BaXrTuY2ea2G6mj1HQ1GEY"></script>

步骤三：具体代码实现

详细代码结构如下：

<template>
  <div class="baoxian" v-title data-title="百度地图">
      <div style="text-align: center;font-weight: bold;">北京区域地图</div>
       <div id="allmap" ref="allmap"></div>    
  </div>
</template>
<script>
import {initzoom} from '@/utils/api/base'
export default {
  name: "Map",
  mounted() {
      this.init();
      this.map();
  },
  methods:{
      init(){
          initzoom(750);
      },
      map(){
      let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别
      map.addControl(new BMap.MapTypeControl({//添加地图类型控件
        mapTypes:[
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]}));
      map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    }
  },
};
</script>
<style lang="scss" scoped>
    #allmap{
  height: 500px;
  overflow: hidden;
}
</style>