uni-app App端map组件（高德地图）中的anchor属性设置不生效

uni-app App端map组件（高德地图）中的anchor属性设置不生效

开发环境 版本号 项目创建方式
Mac 15.6.1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.76

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：MIX3

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<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>

操作步骤：

使用 map 组件（高德地图） 设置标记点 marks， 属性 anchor 设置为 { x: 0.5, y: 0.5 } 在 App 端不生效

预期结果：

标记点应该在中心

实际结果：

标记点在 底边中点（默认效果）

bug描述：

使用 map 组件（高德地图） 设置标记点 marks， 属性 anchor 设置为 { x: 0.5, y: 0.5 } 在 App 端不生效


更多关于uni-app App端map组件（高德地图）中的anchor属性设置不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app App端map组件（高德地图）中的anchor属性设置不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app App端使用高德地图时，anchor属性确实存在兼容性问题。根据官方文档和社区反馈，这个属性在App端的高德地图中支持度有限。

建议的解决方案：

  1. 调整图标尺寸和位置：通过修改图标本身的尺寸和位置来模拟锚点效果
markers: [{
  id: 1,
  latitude: 36.05709,
  longitude: 103.82538,
  iconPath: '/static/icon-point2.jpg',
  width: 40,  // 适当增大图标尺寸
  height: 40,
  // 移除anchor属性
}]

  1. 使用自定义图标：创建已包含正确居中对齐的图标文件，确保图标的中心点就是实际的位置点

  2. 坐标偏移补偿：如果需要精确定位，可以通过计算坐标偏移来补偿

// 在需要精确定位时，手动计算偏移后的坐标
adjustMarkerPosition(lat, lng, offsetX = 0, offsetY = 0) {
  // 根据实际需求实现坐标偏移算法
}
回到顶部