高德地图api基于vue如何添加本地png在地图上

要在基于 Vue 的高德地图 API 上添加本地 PNG 图片，你可以按照以下步骤进行操作：

1. 首先，将 PNG 图片添加到你的 Vue 项目中的静态资源文件夹（通常是 `src/assets` 目录）。

2. 在需要使用地图的组件中，使用 `AMap` 对象加载地图，并在地图加载完成后调用 `AMap.plugin` 方法加载 `AMap.OverView` 插件。

   import AMapLoader from '@amap/amap-jsapi-loader';

   export default {
     mounted() {
       AMapLoader.load({
         key: 'your-amap-key',
         version: '2.0',
         plugins: ['AMap.OverView'],
       }).then(() => {
         this.initMap();
       });
     },
     methods: {
       initMap() {
         // 创建地图实例
         const map = new AMap.Map('mapContainer', {
           center: [lng, lat],
           zoom: 13,
         });

         // 添加 PNG 图片覆盖物
         const pngMarker = new AMap.Marker({
           position: [lng, lat],
           content: '<div><img src="your-image-path.png" alt="png-marker"></div>',
           offset: new AMap.Pixel(-20, -20), // 设置图片偏移量
         });
         map.add(pngMarker);
       },
     },
   };

注意将 `your-amap-key` 替换为你的高德地图 API 密钥，并将 `your-image-path.png` 替换为你添加的 PNG 图片的路径。

3. 在组件的模板中创建一个具有指定 id 的容器元素，用于显示地图。

   <template>
     <div id="mapContainer"></div>
   </template>

4. 在组件的样式中，为地图容器指定高度和宽度。

   <style scoped>
   #mapContainer {
     height: 400px;
     width: 100%;
   }
   </style>

通过以上步骤，你可以在基于 Vue 的高德地图 API 上成功添加本地 PNG 图片在地图上。记得替换相应的密钥和图片路径。