vue2+百度地图开发

一：先在百度开发平台申请你的akhttps://lbsyun.baidu.com/，然后再public文件下中的html引入百度地图

 二：准备地图容器；

<template >
  <div id="map" class="map" style="width:100%;height:700px ;"></div>
</template>

三：初始化地图；

<script>
export default {
  data() {
    return {
      map: null,  //地图实例
      BMap: window.BMap,
      points: { lng: 119.01759, lat: 33.62918898 }, // 中心地坐标，可自行更改
      zoom: 11, //地图缩放级别
    }
  },
  mounted() {
    this.initMap() // 初始化
  },
  methods: {
    // 初始化百度地图
    initMap() {
      let BMap = this.BMap
      this.map = new BMap.Map('map')  // 创建地图对象
      let point = new BMap.Point(this.points.lng, this.points.lat); // 创建中心点坐标
      this.map.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
      this.map.addControl(new BMap.NavigationControl())  // 添加地图控件
      this.map.enableScrollWheelZoom(true);   //滚轮缩放
      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图        
      let overviewControl = new BMap.OverviewMapControl({
        isOpen: true,  //默认打开鹰眼
        size: new BMap.Size(300, 200)   //设置窗口大小
      });
      this.map.addControl(overviewControl);
    },
  },
}
</script>

四：在地图上画一个区域；

<script>
import geojson from '@/assets/json/stree.json'
export default {
  data() {
    return {
      geojson: geojson,  //区坐标
      map: null,  //地图实例
      BMap: window.BMap,
      points: { lng: 119.01759, lat: 33.62918898 }, // 中心地坐标，可自行更改
      zoom: 11, //地图缩放级别
    }
  },
  mounted() {
    this.district()  //区域画线
  },
  methods: {
    //画线区域
    district() {
      let BMap = this.BMap
      let arr = this.geojson.features[0].geometry.coordinates[0]
      arr[0].forEach(item => {
        this.districtPoints.push(new BMap.Point(item[0], item[1]))
      })
      const polygon = new BMap.Polygon(this.districtPoints,
        {
          strokeColor: '#FF0000',    //线条颜色
          strokeWeight: 3,           //线条宽度
          strokeStyle: "dashed",     //线条形式，虚线
          strokeOpacity: 0.5,        //线条的透明度
          fillColor: '#1791fc',      // 覆盖物的颜色
          fillOpacity: 0.5           //覆盖物的透明度
        })
      this.map.addOverlay(polygon)  //添加区域
    }
  },
}
</script>

效果图：

 五：在地图上画出标记点

<script>
import geojson2 from '@/assets/json/street1.json'
export default {
  data() {
    return {
      geojson: geojson,  //区坐标
      geojson2: geojson2,
      map: null,  //地图实例
      BMap: window.BMap,
      points: { lng: 119.01759, lat: 33.62918898 }, // 中心地坐标，可自行更改
      markers: [],  // 创建标记点的数组
      zoom: 11, //地图缩放级别
      districtPoints: [], //区域
      marker: [], // 创建的点
    }
  },
  mounted() {
     this.gaugePoint()  // 画标记点
  },
  methods: {
    // 画标记点
    gaugePoint() {
      let BMap = this.BMap
      this.geojson2.features.forEach(item => {
        // 自定义标点图标
        let myIcon = new BMap.Icon('http://www.jiaxinbpo.com/public/upload/images/mz/dt_2.png', new BMap.Size(50, 65), {
          imageSize: new BMap.Size(25, 30), // 设置图标大小
        });
        let point = item.properties.geo_wkt.split('(')[1].split(')')[0].split(' ')
        let points = new BMap.Point(point[0], point[1])
        let marker = new BMap.Marker(points, { icon: myIcon })  // 创建标记点
        this.markers.push(marker)
        this.map.addOverlay(marker)  // 在地图上添加标记点
      }
      )
    }
  }
}
</script>

效果图：

 六：给每个点添加点击事件；

<script>
import geojson from '@/assets/json/stree.json'
import geojson2 from '@/assets/json/street1.json'
export default {
  data() {
    return {
      geojson: geojson,  //区坐标
      geojson2: geojson2,
      map: null,  //地图实例
      BMap: window.BMap,
      points: { lng: 119.01759, lat: 33.62918898 }, // 中心地坐标，可自行更改
      markers: [],  // 创建标记点的数组
      zoom: 11, //地图缩放级别
      districtPoints: [], //区域
      marker: [], // 创建的点
    }
  },
  mounted() {
    this.initMap() // 初始化
    this.district()  //区域画线
    this.gaugePoint()  // 画标记点
    this.clickEvent()   //点击事件
    this.onmouseover() //鼠标移入事件
    this.removalEvent()  //鼠标移出事件
  },
  methods: {
    //弹窗
    popUp(item, obj) {
      let BMap = this.BMap
      let pt = new BMap.Point(obj)
      let opts = {
        width: 80,      // 信息窗口高度
        title: '<h4 style="display: block; font-size:14px; color: #333;">个人信息</h4>', // 信息窗口标题
      }
      let str = "<span style='font-size:14px; line-height:22px'>经度:" + item.point.lng + "</span>";
      str += "<span style='font-size:14px; line-height:22px'>维度:" + item.point.lat + "</span>";
      // str += "<p style='font-size:14px; line-height:22px'>住址:" + 'item.residentialAdd' + "</p>";
      // str += "<p style='font-size:14px; line-height:22px'>身份账号:" + 'item.memberIdCard' + "</p>";
      let infoWindow = new BMap.InfoWindow(str, opts);  // 创建信息窗口对象 
      item.openInfoWindow(infoWindow, pt)  //显示窗口
    },
    //给每个标记点添加点击事件
    clickEvent() {
      let marker = this.markers
      for (let i = 0; i < marker.length; i++) {
        marker[i].addEventListener('click', e => {
          console.log('触发了点击事件');
          let obj = { lng: e.point.lng, lat: e.point.lat }
          this.popUp(marker[i], obj)
        })
      }
    },
    //给每个标记点添加鼠标移入事件
    onmouseover() {
      this.markers.forEach(item => {
        item.addEventListener('mouseover', e => {
          let obj = { lng: e.point.lng, lat: e.point.lat }
          this.popUp(item, obj)
        })
      })

    },
    //鼠标移出事件
    removalEvent() {
      let BMap = this.BMap
      this.markers.forEach(item => {
        item.addEventListener('mouseout', e => {
          let pt = new BMap.Point(e.point.lng, e.point.lat);
          let opts = {}
          let str = "";
          let infoWindow = new BMap.InfoWindow(str, opts);
          this.map.closeInfoWindow(infoWindow, pt)
        })
      })
    }
  },
}
</script>

效果图：

 这个是我git地址有需要的请便：https://gitee.com/cyyddl/baiduditu.git