<template>
<view>
<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" />
</view>
</template>
<script>
export default {
data() {
return {
longitude: 103.82538,
latitude: 36.05709,
markers: [
{
id: 1,
latitude: 36.05709,
longitude: 103.82538,
iconPath: '/static/icon-point2.jpg',
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 0.5
}
}
],
}
},
}
</script>
<style scoped lang="scss">
.map {
width: 750rpx;
height: 750rpx;
}
</style>
1***@qq.com
- 发布：2025-11-27 14:52
- 更新：2025-12-17 19:18
- 阅读：99
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 15.6.1
HBuilderX类型： 正式
HBuilderX版本号： 4.76
手机系统： Android
手机系统版本号： Android 12
手机厂商： 小米
手机机型： MIX3
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
使用 map 组件（高德地图）
设置标记点 marks，
属性 anchor 设置为 { x: 0.5, y: 0.5 }
在 App 端不生效
使用 map 组件（高德地图）
设置标记点 marks，
属性 anchor 设置为 { x: 0.5, y: 0.5 }
在 App 端不生效
预期结果：
标记点应该在中心
标记点应该在中心
实际结果：
标记点在 底边中点（默认效果）
标记点在 底边中点（默认效果）
bug描述：
使用 map 组件（高德地图）
设置标记点 marks，
属性 anchor 设置为 { x: 0.5, y: 0.5 }
在 App 端不生效
1***@qq.com (作者)
绿色的图标纵向上不在红色区域的中心，anchor: { x: 0.5, y: 0.5 } 设置横向剧中了，纵向没剧中
2025-12-26 17:26
DCloud_UNI_OttoJi
回复 1***@qq.com: 你是这个意思，这里你需要微调，默认的不调是一个钉子图标，需要在矩形图标的底部中间位置，设计如此
2025-12-26 19:56
4***@qq.com
回复 DCloud_UNI_OttoJi: 对，他就是要用anchor来调整，但是anchor属性不生效。。。。我也遇到了。
2026-01-12 16:32
DCloud_UNI_OttoJi
回复 4***@qq.com: 生效了，效果符合预期， 0.5 0.5 就是这样设计的，图标需要使用钉子类的图标，图标下边框中间位置对准位置。你是其他问题吗
2026-01-12 17:12