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>
```
最低0.47元/天 解锁文章
1493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
