vue 中使用高德地图URI API

在Vue中使用高德地图URI API，需要先引入高德地图的JS SDK。可以在index.html文件中添加以下代码引入SDK：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_key"></script>

注意将your_amap_key替换为你自己的高德地图开发者密钥。

然后，在Vue组件中可以使用created钩子函数来初始化地图，并使用高德地图的URI API来进行相关操作。

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  created() {
    const map = new AMap.Map('map-container', {
      zoom: 13, // 设置地图缩放级别
      center: [116.39, 39.9], // 设置地图中心点
    });

    // 使用URI API来添加标记点
    const marker = new AMap.Marker({
      position: [116.39, 39.9],
      title: 'Marker',
    });
    marker.setMap(map);

    // 使用URI API来添加信息窗体
    const infoWindow = new AMap.InfoWindow({
      content: 'Hello, AMap!',
    });
    AMap.event.addListener(marker, 'click', function () {
      infoWindow.open(map, marker.getPosition());
    });
  },
};
</script>

上述代码中，首先在created钩子函数中创建了一个地图实例，并设置了缩放级别和中心点。然后使用URI API来创建了一个标记点，并添加到地图上。同时使用URI API来创建了一个信息窗体，并在标记点的点击事件中打开信息窗体。

需要注意的是，在使用高德地图的URI API时，需要先确保高德地图的JS SDK已经加载完成。可以在mounted钩子函数中进行判断，确保地图API已经加载完成后再进行相关操作。

<script>
export default {
  mounted() {
    if (typeof AMap === 'undefined') {
      window.addEventListener('amaploaded', this.initMap);
    } else {
      this.initMap();
    }
  },
  methods: {
    initMap() {
      // 在这里进行地图初始化和相关操作
    },
  },
};
</script>

以上就是在Vue中使用高德地图URI API的基本步骤。根据具体需求，可以使用URI API来实现更多功能，比如添加路线、搜索地点等。具体的API文档可以参考高德地图开发者文档