vue高德地图自定义标记

Vue高德地图自定义标记可以通过以下步骤进行：

1. 引入高德地图JavaScript API

在Vue组件的script标签中引入高德地图JavaScript API，例如：

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

其中key为你的高德地图开发者账号的应用key。

2. 定义地图容器

在Vue组件的template标签中定义地图容器，例如：

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

其中id为map-container的div元素用于承载地图。

3. 初始化地图对象

在Vue组件的script标签中，通过AMap.Map类初始化地图对象，例如：

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });
  }
}
</script>

其中zoom表示地图缩放级别，center表示地图中心点坐标。

4. 自定义标记图标

在Vue组件的script标签中，通过AMap.Icon类定义自定义标记图标，例如：

<script>
export default {
  mounted() {
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: 'https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',
      imageSize: new AMap.Size(50, 50)
    });
  }
}
</script>

其中size表示标记图标尺寸，image表示标记图标图片地址，imageSize表示标记图标显示尺寸。

5. 添加自定义标记

在Vue组件的script标签中，通过AMap.Marker类添加自定义标记，例如：

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: 'https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',
      imageSize: new AMap.Size(50, 50)
    });
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      icon: icon,
      offset: new AMap.Pixel(-25, -25)
    });
    marker.setMap(map);
  }
}
</script>

其中position表示标记位置坐标，icon表示标记图标，offset表示标记图标偏移量。

6. 完整代码

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

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: 'https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',
      imageSize: new AMap.Size(50, 50)
    });
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      icon: icon,
      offset: new AMap.Pixel(-25, -25)
    });
    marker.setMap(map);
  }
}
</script>