uni-app map组件在vue3下无法定位到当前位置（仅APP端）

uni-app map组件在vue3下无法定位到当前位置（仅APP端）

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

产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.2.16
手机系统：全部
页面类型：vue
vue版本：vue3
打包方式：云端
项目创建方式：HBuilderX

测试过的手机：鸿蒙2.0 荣耀

示例代码：

  <view class="content">  
    <view class="test-button">  
      <button @click="onZoom">-</button>  
    </view>  
    <map id="test-map" class="map-test" :show-location="true" :scale="mapScale" :longitude="longitude" :latitude="latitude" :markers="markers"></map>  
  </view>  
</template>  

<script lang="ts">  
import vue, { ref, onMounted, defineComponent } from "vue";  

export default defineComponent({  
  onLoad() {},  
  setup() {  
    const MapContext = uni.createMapContext("test-map");  
    const longitude = ref(116.39747);  
    const latitude = ref(39.908823);  
    const mapScale = ref(16);  
    const markers = ref([]);  
    const polyline = ref([]);  

    uni.getLocation({  
      type: "gcj02",  
      success: (res) => {  
         /*app端不正常的*/  
        // longitude.value = res.longitude;  
        // latitude.value = res.latitude;  
        /*app端正常的*/  
        longitude.value = res.latitude;  
        latitude.value = res.longitude;  
        // longitude.value = "113.75179";  
        // latitude.value= "23.02067";  
        console.log("当前位置的经度：" + res.longitude);  
        console.log("当前位置的纬度：" + res.latitude);  
      },  
      fail(e) {  
        console.log(e);  
      }  
    });  

    // #ifdef MP-WEIXIN  
    MapContext.setCenterOffset({  
      offset: [0.5, 0.26]  
    });  
    // #endif  

    const scale = ref(13);  
    return { longitude, latitude, markers, polyline, mapScale, MapContext, scale };  
  },  
  methods: {  
    onZoom() {  
      this.mapScale = this.mapScale - 1;  
    }  
  }  
});  
</script>  

<style>  
.map-test {  
  width: 100vw;  
  height: calc(100vh - 100px);  
}  
.test-button {  
}  
</style>

操作步骤：

uni.getLocation({  
      type: "gcj02",  
      success: (res) => {  
         /*app端不正常的*/  
        // longitude.value = res.longitude;  
        // latitude.value = res.latitude;  
        /*app端正常的*/  
        longitude.value = res.latitude;  
        latitude.value = res.longitude;  
        // longitude.value = "113.75179";  
        // latitude.value= "23.02067";  
        console.log("当前位置的经度：" + res.longitude);  
        console.log("当前位置的纬度：" + res.latitude);  
      },  
      fail(e) {  
        console.log(e);  
      }  
 });

预期结果：

定位到当前结果

实际结果：

定位不知道那到哪里了

更多关于uni-app map组件在vue3下无法定位到当前位置（仅APP端）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app map组件在vue3下无法定位到当前位置（仅APP端）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的代码和描述，问题出在经纬度赋值错误。在 uni.getLocation 的 success 回调中，你注释了正确的赋值方式，而使用了错误的交换赋值：

/*app端不正常的*/ - 这是错误的
longitude.value = res.latitude;  // 纬度赋值给经度
latitude.value = res.longitude;  // 经度赋值给纬度

正确的应该是：

longitude.value = res.longitude;  // 经度赋值给经度
latitude.value = res.latitude;    // 纬度赋值给纬度

另外，在 Vue3 的 setup 函数中，MapContext 的创建时机需要注意。建议在 onMounted 或组件挂载后创建：

import { ref, onMounted } from 'vue'

setup() {
  const mapContext = ref(null)
  
  onMounted(() => {
    mapContext.value = uni.createMapContext("test-map")
  })
  
  // 其他代码...
}

同时确保在 manifest.json 中已经配置了定位权限：

{
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
          "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>"
        ]
      }
    }
  }
}
回到顶部