车辆位置显示

车辆位置显示

问题：point和map显示未定义

在 mounted 钩子函数中，调用 initMap 方法初始化百度地图，创建地图实例和点坐标，并设置地图的中心点和缩放级别。同时，在地图上创建标注，并添加到地图中。

<TabPane label="车辆位置">
    <div style="display: flex;">
        ......
    </div>
    // 给车辆位置设置地图显示范围
    <div id="map" style="width: 100%; height: 600px;"></div>
</TabPane>

export default {
  data () {
    return {
      ......
      // 存储百度地图对象
      map: '',
      // 存储地图上的点坐标
      point: '',
      ......
    }
  },
  mounted () {
    let vm = this
    // 百度地图初始化
    vm.initMap()
    // 创建标注
    const marker = new BMap.Marker(vm.point)
    // 将标注添加到地图中
    vm.map.addOverlay(marker)
    ......
  },
  methods: {
    ......
    initMap () {
      let vm = this
      // 在百度地图 API 加载完成后，可以使用 BMap 对象
      // 百度地图初始化
      // 创建Map实例
      vm.map = new BMap.Map('map')
      // 创建点坐标
      vm.point = new BMap.Point(114.053, 22.666)
      // 初始化地图，设置中心点坐标和地图级别
      vm.map.centerAndZoom(vm.point, 15)
    }
  }
}

问题总结：将map和point都定义在组件的数据中，通过这种方式，可以在整个组件中引用 this.point 和 this.map，确保它们在不同的方法中都能被正确访问。