uni-app引入高德地图后，用同样的点坐标和线坐标绘制但地图上显示点和线位置不一致

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app引入高德地图后，用同样的点坐标和线坐标绘制但地图上显示点和线位置不一致

测试过的手机：

HarmonyOS 3.0.0

示例代码：

<template>  
  <map  
    id="map"  
    class="map-style"  
    style="{ height: '100%', width: '100%' }"
    theme="'satellite'"
    enable-satellite="true"
    scale="scale"
    latitude="latitude"
    longitude="longitude"
    markers="markers"
  >
  </map>
</template>

<script setup>
const props = defineProps({
  scale: { type: Number, default: 16 },
  latitude: {
    type: Number,
    default: 0,
  },
  longitude: {
    type: Number,
    default: 0,
  },
  markers: {
    type: Array,
    default: [],
  },
})
</script>

操作步骤：

点的数组：

[
  {
    "latitude": 25.123306,
    "longitude": 102.741492,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123306,
    "longitude": 102.741492,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123306,
    "longitude": 102.741492,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123302,
    "longitude": 102.74149,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123302,
    "longitude": 102.74149,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123317,
    "longitude": 102.741487,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123317,
    "longitude": 102.741487,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123317,
    "longitude": 102.741487,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123356,
    "longitude": 102.741338,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123356,
    "longitude": 102.741338,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123356,
    "longitude": 102.741338,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  },
  {
    "latitude": 25.123348,
    "longitude": 102.741334,
    "iconPath": "/assets/point.06710a56.png",
    "width": 5,
    "height": 5
  }
]
线的数组：
```json
[
  {
    "points": [
      {
        "latitude": 25.123306,
        "longitude": 102.741492
      },
      {
        "latitude": 25.123306,
        "longitude": 102.741492
      },
      {
        "latitude": 25.123306,
        "longitude": 102.741492
      },
      {
        "latitude": 25.123302,
        "longitude": 102.74149
      },
      {
        "latitude": 25.123302,
        "longitude": 102.74149
      },
      {
        "latitude": 25.123317,
        "longitude": 102.741487
      },
      {
        "latitude": 25.123317,
        "longitude": 102.741487
      },
      {
        "latitude": 25.123317,
        "longitude": 102.741487
      },
      {
        "latitude": 25.123356,
        "longitude": 102.741338
      },
      {
        "latitude": 25.123356,
        "longitude": 102.741338
      },
      {
        "latitude": 25.123356,
        "longitude": 102.741338
      },
      {
        "latitude": 25.123348,
        "longitude": 102.741334
      }
    ],
    "color": "#000",
    "width": 10
  }
]

预期结果：

点和线的端点在一起

实际结果：

隔得有距离。如上图所示


Harmonyos Next教程
1 回复

在uni-app中引入高德地图后，如果遇到点和线位置不一致的问题，通常可能是由于坐标系统的不匹配、API使用不当或数据传递错误引起的。以下是一个示例代码，展示了如何在uni-app中正确使用高德地图API绘制点和线，确保它们的显示位置一致。

首先，确保你已经在uni-app项目中正确引入了高德地图SDK，并在manifest.json中配置了相关权限和key。

1. 安装高德地图SDK

如果尚未安装，可以通过npm安装高德地图的JavaScript API（虽然通常是在HTML中通过script标签引入，但在uni-app中，你可以通过条件编译来引入）：

# 实际上这一步在uni-app中不常见，通常是通过HTML script标签引入高德地图SDK
# npm install @amap/amap-jsapi-loader --save

2. 在页面中引入高德地图

在需要使用高德地图的页面中，通过<script>标签引入高德地图SDK（注意条件编译）：

<!-- #ifdef H5 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>
<!-- #endif -->

3. 绘制点和线

以下是一个在uni-app页面中使用高德地图API绘制点和线的示例代码：

export default {
  data() {
    return {
      map: null,
      marker: null,
      polyline: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 10,
        center: [116.397428, 39.90923], // 北京的中心点
      });

      // 添加点
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(116.397428, 39.90923),
        map: this.map,
      });

      // 添加线
      const path = [
        new AMap.LngLat(116.397428, 39.90923),
        new AMap.LngLat(116.406428, 39.90023),
      ];
      this.polyline = new AMap.Polyline({
        path: path,
        strokeColor: "#FF33FF",  //线颜色
        strokeOpacity: 1,        //线透明度
        strokeWeight: 3,         //线宽
        strokeStyle: "solid",    //线样式
        map: this.map,
      });
    },
  },
};

确保你的页面模板中有一个id为container的div元素作为地图容器。

4. 检查坐标

确保你使用的点坐标和线坐标是同一坐标系（如WGS84）。如果数据源使用的是其他坐标系（如GCJ02），则需要在绘制前进行转换。

通过上述代码，你应该能够在uni-app中正确绘制点和线，并确保它们的位置一致。如果问题依旧存在，请检查数据传递和坐标转换是否正确。

回到顶部