1.全局引入

安装  npm install --save vue-baidu-map

1.2全局配置 在main.js中配置

效果图:

二.代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
 
    <!--百度地图-->
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      @ready="handler"
      :auto-resize="true"
      :scroll-wheel-zoom="true"
    >
      <bm-marker
        v-for="(item, index) in points"
        :key="index"
        :position="{ lng: item.lng, lat: item.lat }"
        @click="clickHandler(item.content,item.lng,item.lat)"
        :icon="item.icon"
 
      >
      </bm-marker>
      <bm-info-window
        :show="show"
        :position="windowposition"
        @close="infoWindowClose"
        @open="infoWindowOpen"
        >{{content}}</bm-info-window
      >
 
      <bm-polyline
        :path="points"
        stroke-style="dashed"
        stroke-color="blue"
        :stroke-opacity="0.3"
        :stroke-weight="1"
      ></bm-polyline>
 
      
    </baidu-map>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to map',
      center: { lng: 112, lat: 37 },
      zoom: 14,
      points: [],
      windowposition: {},
      content: {},
      show: false,
      icon: { url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png"},
 
    }
  },
    mounted() {
 
    this.addPoints();
  },
  methods: {
 
    //地图实例
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 112.404;
      this.center.lat = 37.755;
      this.zoom = 10;
    },
    clickHandler(content,lng,lat) {
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
      this.windowposition = { lng: lng, lat: lat };
      this.content=content;
      this.show = true;
    },
    addPoints() {
      const points = [];
      for (var i = 0; i < 10; i++) {
        let icon = this.icon;
        const position = {
          lng: Math.random() + 112,
          lat: Math.random() + 37,
          content: "我爱北京天安门" + i,
          ico: icon,
        };
        points.push(position);
      }
      this.points = points;
 
      console.log("this.points", this.points);
    },
    infoWindowOpen() {
      this.show = true;
    },
    infoWindowClose() {
      this.show = false;
    },
  }
}
</script>
 
<style scoped>
.bm-view {
  width: 100%;
  height: 800px;
}
</style>

3.参考百度Vue Baidu Map 

4.代码下载 代码下载