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.addContro