【高德地图】vue使用高德地图（js api）

在Vue中使用高德地图（Amap），你需要首先在项目中安装高德地图的JavaScript API。以下是一个简单的步骤指南和示例代码：

1. 安装高德地图JavaScript API：

npm install @amap/amap-jsapi-loader --save

2. 在Vue组件中引入并使用高德地图：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
 
export default {
  name: 'MapComponent',
  mounted() {
    AMapLoader.load({
      key: '你的高德地图API密钥',
      version: '2.0',
      plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      AMapUI: {
        version: '1.1',
        plugins: [],
      },
    }).then((AMap) => {
      const map = new AMap.Map('map', {
        zoom: 10,
        center: [116.397428, 39.90923], // 初始化地图中心点
      });
      
      // 你可以在这里添加更多地图操作
    }).catch(e => {
      console.log(e);
    });
  },
};
</script>
 
<style>
/* 样式代码 */
</style>

确保替换你的高德地图API密钥为你从高德官网获取的API Key。

这段代码在组件的mounted生命周期钩子中使用AMapLoader.load方法来异步加载高德地图的JavaScript API，并创建了一个地图实例，你可以在回调函数中继续进行地图操作。