vue高德地图自定义标记

Vue中使用高德地图自定义标记可以通过以下步骤实现：

1. 在Vue项目中安装高德地图JavaScript API：

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

2. 在Vue组件中引入高德地图JavaScript API：

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

export default {
  name: 'Map',
  data() {
    return {
      map: null,
      markers: []
    };
  },
  mounted() {
    AMapLoader.load({
      key: 'your_amap_key',
      version: '2.0',
      plugins: ['MarkerClusterer'],
      AMapUI: {
        version: '1.1',
        plugins: ['overlay/SimpleMarker']
      }
    }).then((AMap) => {
      this.map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923]
      });
    });
  }
}

3. 创建自定义标记：

const marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  icon: new AMap.Icon({
    size: new AMap.Size(25, 34),
    image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
    imageSize: new AMap.Size(25, 34)
  }),
  offset: new AMap.Pixel(-13, -34),
  title: '北京市'
});

4. 将标记添加到地图上：

this.markers.push(marker);
this.map.add(marker);

5. 完整代码：

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

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'Map',
  data() {
    return {
      map: null,
      markers: []
    };
  },
  mounted() {
    AMapLoader.load({
      key: 'your_amap_key',
      version: '2.0',
      plugins: ['MarkerClusterer'],
      AMapUI: {
        version: '1.1',
        plugins: ['overlay/SimpleMarker']
      }
    }).then((AMap) => {
      this.map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923]
      });

      const marker = new AMap.Marker({
        position: [116.397428, 39.90923],
        icon: new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          imageSize: new AMap.Size(25, 34)
        }),
        offset: new AMap.Pixel(-13, -34),
        title: '北京市'
      });

      this.markers.push(marker);
      this.map.add(marker);
    });
  }
}
</script>

以上代码可以在Vue中创建一个自定义标记并将其添加到高德地图上。可以根据需要调整标记的位置、图标、大小、偏移量和标题等属性。