uni-app 百度地图使用map组件自定义基座和云打包后相同坐标的标注点显示位置不一致

uni-app 百度地图使用map组件自定义基座和云打包后相同坐标的标注点显示位置不一致

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    <view style="border: 1px solid red;">  
      <map  
      style="width: 750rpx; height: 50vh"  
      :scale="myMap.scale"  
      :min-scale="myMap.minScale"  
      :max-scale="myMap.maxScale"  
      :latitude="myMap.latitude"  
      :longitude="myMap.longitude"  
      :markers="myMap.covers"  
      :enable-scroll="false"  
      :enable-zoom="false"  
    >  
    </map>  
    </view>  
    </view>  
</template>  

<script setup>  
import { ref } from "vue";  
import iconPath from "@/static/location.png";  
const title = ref("test");  
// 87.51324219094087,43.837167517971544  
const point = ref({  
  longitude: 87.51324219094087,  
  latitude: 43.837167517971544  
})  
const myMap = ref({  
  id: 0, // 使用 marker点击事件 需要填写id  
  title: "map",  
  // scale: 16,  
  minScale: 3,  
  maxScale: 20,  
  latitude: point.value.latitude, //43.8256,  
  longitude: point.value.longitude, //87.6168,  
  covers: [  
    {  
      latitude: point.value.latitude, //43.8256,  
      longitude: point.value.longitude, //87.6168,  
      localName: "",  
      iconPath,  
      label: {  
        content: "我的位置",  
        anchor: { x: 0.5, y: 0.5 },  
        x: -35,  
        y: -5,  
        borderWidth: 1,  
        borderColor: "#FF0000",  
        // bgColor: "#FF0000",  
        color: "#000",  
        padding: 10,  
        textAlign: "center",  
        display: "ALWAYS",  
      },  
    }  
  ],  
});  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤：

  1. 使用自定义基座启动查看地图标注点
  2. 云打包后安装app打开页面查看地图标注点

预期结果：

相同坐标的标注点使用地图组件map在自定义基座中和云打包后显示的位置应该一致

实际结果：

相同坐标的标注点使用地图组件map在自定义基座中和云打包后显示的位置不一致

bug描述：

相同坐标的标注点使用地图组件map在自定义基座中和云打包后显示的位置不一致 地图厂商：百度地图

Image Image

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

更多关于uni-app 百度地图使用map组件自定义基座和云打包后相同坐标的标注点显示位置不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

hello，你这图上的是定位的获取的点还是 marker的显示？

更多关于uni-app 百度地图使用map组件自定义基座和云打包后相同坐标的标注点显示位置不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


marker的显示，坐标点是固定写死的，但是打包后在手机上安装显示的marker的位置和本地自定义基座启动后的显示位置不一致

这是一个常见的百度地图坐标系偏移问题。在uni-app中，自定义基座和云打包使用了不同的坐标系处理方式：

  1. 自定义基座通常使用WGS84坐标系（GPS标准坐标系）
  2. 云打包后可能使用了GCJ02坐标系（国测局坐标系）

这种坐标系差异导致了相同经纬度坐标在不同环境下显示位置不一致。

解决方案：

在云打包时，需要在 manifest.json 中明确指定坐标系：

{
  "app-plus": {
    "maps": {
      "baidu": {
        "coord_type": "gcj02"
      }
    }
  }
}

或者如果希望统一使用WGS84：

{
  "app-plus": {
    "maps": {
      "baidu": {
        "coord_type": "wgs84"
      }
    }
  }
}
回到顶部