vue中使用高德地图

在Vue中使用高德地图，你可以按照以下步骤进行操作：

1. 在你的Vue项目中安装高德地图SDK。你可以通过npm或者yarn来安装依赖，执行以下命令：

   npm install vue-amap --save

2. 在你的Vue项目的main.js（或者其他入口文件）中引入高德地图SDK：

   import VueAMap from 'vue-amap';
   
   Vue.use(VueAMap);

3. 在你的Vue组件中使用高德地图组件。例如，在一个名为Map.vue的组件中添加以下代码：

   <template>
     <div id="map-container">
       <amap-map :zoom="13" :center="center">
         <amap-marker :position="center"></amap-marker>
       </amap-map>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         center: [116.397428, 39.90923] // 设置地图中心点坐标
       };
     }
   };
   </script>
   
   <style>
   #map-container {
     width: 100%;
     height: 400px;
   }
   </style>

4. 在需要使用地图的地方引入Map.vue组件：

   <template>
     <div>
       <Map />
     </div>
   </template>
   
   <script>
   import Map from './Map.vue';
   
   export default {
     components: {
       Map
     }
   };
   </script>

这样，你就可以在Vue项目中使用高德地图了。你可以根据需要自定义地图的样式和功能，具体的API文档可以参考[高德地图SDK文档](https://lbs.amap.com/api/javascript-api/summary/)。