uni-app map组件H5 markers定位显示错误

uni-app map组件H5 markers定位显示错误

示例代码：

<map  
    style="width: 100%; height: 100vh"  
    :latitude="centerPoint[0]"  
    :longitude="centerPoint[1]"  
    @regionchange="regionchange"  
    :markers="covers"  
    ref="Amap"  
    id="map"  
    v-if="markers.length > 0"  
>  

const covers = ref([  
  {  
    latitude: 39.909,  
    longitude: 116.39742,  
    iconPath: "/pages-sub/static/images/icon_map_landmarks.png",  
  },  
  {  
    latitude: 39.9,  
    longitude: 116.39,  
    iconPath: "/pages-sub/static/images/icon_map_landmarks.png",  
  },  
])



### 操作步骤：
和代码一样。

### 预期结果：
和小程序一样

### 实际结果：
marker 都没有在指定点上

### bug描述：
小程序环境没有问题，但是同样的代码H5就会出现这种情况。 使用的高德地图。

![image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241114/36f0ab961ae698ef53b277c9f181f4de.png)

| 信息项         | 描述                       |
|----------------|----------------------------|
| 产品分类       | uniapp/H5                  |
| PC开发环境     | Windows                    |
| PC操作系统版本 | win10                      |
| 浏览器平台     | Chrome                     |
| 浏览器版本     | 130.0.6723.117             |
| 项目创建方式   | CLI                        |
| CLI版本号      | 3.0.0-alpha-4010520240507001" |

更多关于uni-app map组件H5 markers定位显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app map组件H5 markers定位显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app的map组件在H5平台上markers定位显示错误的问题时，首先需要确认几个关键点：是否是坐标数据错误、是否是map组件属性设置不当、或者是H5平台的兼容性问题。下面是一个基本的代码示例，以及一些可能导致问题的检查点，来帮助你排查和修复这个问题。

示例代码

<template>
  <view>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      show-location
      style="width: 100%; height: 500px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.397428, // 北京的经度
      latitude: 39.90923,    // 北京的纬度
      scale: 15,
      markers: [
        {
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          title: '北京',
          iconPath: '/static/marker.png',
          width: 50,
          height: 50
        }
      ]
    };
  },
  onLoad() {
    // 如果需要获取当前位置，可以使用uni.getLocation API
    uni.getLocation({
      type: 'gcj02', // 微信小程序使用gcj02坐标系，H5可能需要wgs84
      success: (res) => {
        this.longitude = res.longitude;
        this.latitude = res.latitude;
        // 更新markers位置
        this.markers[0].longitude = res.longitude;
        this.markers[0].latitude = res.latitude;
      },
      fail: (err) => {
        console.error('获取位置失败', err);
      }
    });
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

检查点

  1. 坐标数据：确保markers中的坐标数据是准确的，并且符合H5平台的要求（如使用wgs84坐标系）。

  2. map组件属性：检查longitude、latitude、scale等属性是否设置正确，markers数组格式是否无误。

  3. H5平台兼容性：不同浏览器对map组件的支持程度可能有所不同，特别是在处理地理定位时。可以尝试在多个浏览器上测试，看看问题是否普遍存在。

  4. 权限问题：确保应用有权限访问用户的地理位置信息，特别是在移动设备上。

  5. API调用：如果使用uni.getLocation获取位置信息，确保API调用成功，并且返回的数据被正确处理。

通过上述代码和检查点，你应该能够定位并解决uni-app的map组件在H5平台上markers定位显示错误的问题。如果问题依然存在，可能需要更详细地检查代码或查阅uni-app和H5平台的官方文档。

回到顶部