vue中用高德地图根据经纬度在地图上显示一个定位点

在Vue中使用高德地图(Amap)显示一个位置点，你需要首先在项目中引入高德地图API，并创建一个Vue组件来处理地图的初始化和显示位置点的逻辑。

以下是一个简单的Vue组件示例，展示了如何实现这个功能：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'AmapLocation',
  props: {
    longitude: {
      type: Number,
      required: true
    },
    latitude: {
      type: Number,
      required: true
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 高德地图API的key需要你自己去高德开放平台申请
      const key = '你的高德API Key';
      const map = new AMap.Map('map', {
        zoom: 16, // 缩放级别
        center: [this.longitude, this.latitude] // 中心点坐标
      });
 
      // 创建标记点
      const marker = new AMap.Marker({
        position: new AMap.LngLat(this.longitude, this.latitude),
        map: map
      });
 
      // 将标记点添加到地图上显示
      marker.setMap(map);
    }
  }
};
</script>

在这个组件中，你需要传入经度(longitude)和纬度(latitude)作为位置点。组件挂载后，mounted 钩子函数会调用 initMap 方法来初始化地图，并在地图中心显示一个标记点。

确保你已经在项目中引入了高德地图的JavaScript API库，并且有效的API Key。你可以在高德开放平台注册并获取一个Key。

使用这个组件时，只需要传入正确的经纬度值即可在地图上显示位置点。