vue接入高德地图初始化定位

Question

场景：
vue接入高德地图的时候使用定位插件AMap.Geolocation
初始进入页面的时候是这样子

但是发现只有点击定位按钮的时候才进行定位
中间的圆环和定位点也才显示出来

问题：如何在页面加载的时候就执行AMap.Geolocation 的定位方法并且展示出定位后的样子？

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

回答： 可以在组件的mounted钩子函数中使用AMap.Geolocation的定位方法，并且在获取定位结果后，使用高德地图API的addMarker方法，在地图中展示定位结果。 下面是示例代码：

<template>
  <div id="map-container"></div>
</template>
<script>
import AMap from 'AMap';
export default {
  mounted() {
    // 创建地图对象
    const map = new AMap.Map('map-container', {
      zoom: 15,
    });
    // 创建定位插件
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,
      timeout: 10000,
      buttonOffset: new AMap.Pixel(10, 10),
    });
    // 调用定位方法
    geolocation.getCurrentPosition((status, result) => {
      if (status === 'complete') {
        // 添加定位点标记
        const marker = new AMap.Marker({
          position: [result.position.lng, result.position.lat],
          map,
        });
        // 添加定位圆环
        const circle = new AMap.Circle({
          center: [result.position.lng, result.position.lat],
          radius: result.accuracy,
          map,
          fillOpacity: 0.2,
          strokeOpacity: 0.5,
        });
        // 将地图中心设置为定位结果的经纬度
        map.setCenter([result.position.lng, result.position.lat]);
      } else {
        // 定位失败处理
      }
    });
  },
};
</script>
<style scoped>
#map-container {
  height: 500px;
}
</style>

在mounted钩子函数中，先创建地图对象和定位插件。然后使用geolocation.getCurrentPosition方法获取定位结果，在获取定位结果后，使用addMarker方法在地图中添加定位点的标记和定位圆环，并且将地图中心点设置为定位结果的经纬度。 需要注意的是，在定位插件的配置中，需要设置enableHighAccuracy属性为true，以获取更准确的定位结果。同时，由于getCurrentPosition方法是异步的，所以需要使用回调函数来获取定位结果。在回调函数中，通过status参数判断定位是否成功，在定位成功时，可以通过result参数获取定位结果的经纬度和精度半径。