uni-app ios app 环境下Map 组件 绑定@tap 点击地图获取不到经纬度
uni-app ios app 环境下Map 组件 绑定@tap 点击地图获取不到经纬度
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| PC | Windows | CLI |
| 手机 | iOS | |
| iOS 12.4 | ||
| 厂商 | 苹果 | |
| 机型 | iPhone 6 plus |
map 组件绑定@tap 在ios app环境点击地图没有返回经纬度
示例代码：
<map id="myMap" ref="myMap" [@tap](/user/tap)="mapClicked" :longitude="markers[0].longitude" :latitude="markers[0].latitude" scale="12"
:markers="markers" @regionchange="mapChange" show-location style="width: 100%">
<cover-image v-if="isShowLocationIcon" src="https://static.car-me.cn/weixin_static/bldme/static/home/roadside/move_location.png" class="icon_move_location" @click="moveToLocation"></cover-image>
<cover-view class="location_wrap_text" v-if="locationName">{{ locationName }}</cover-view>
</map>onReady() {
this.mapCtx = uni.createMapContext('myMap')
},mapClicked(e) {
console.log(e)
}操作步骤：
- 点击地图，查看方法打印
预期结果：
- 返回当前点击地点经纬度
实际结果：
{
"detail": {
"y": null
},
"target": {
"offsetTop": 0,
"id": "",
"y": null,
"offsetLeft": 0,
"dataset": {}
},
"currentTarget": {
"offsetTop": 0,
"id": "",
"offsetLeft": 0,
"dataset": {}
},
"changedTouches": [
{
"force": 1,
"identifier": 0
}
],
"timeStamp": 0,
"type": "click",
"touches": [
{
"force": 1,
"identifier": 0
}
],
"preventDefault": "function() { [native code] }",
"stopPropagation": "function() { [native code] }",
"mp": {
"@warning": "mp is deprecated",
"detail": {
"y": null
},
"target": {
"offsetTop": 0,
"id": "",
"y": null,
"offsetLeft": 0,
"dataset": {}
},
"currentTarget": {
"offsetTop": 0,
"id": "",
"offsetLeft": 0,
"dataset": {}
},
"changedTouches": [
{
"force": 1,
"identifier": 0
}
],
"timeStamp": 0,
"type": "click",
"touches": [
{
"force": 1,
"identifier": 0
}
],
"preventDefault": "function() { [native code] }",
"stopPropagation": "function() { [native code] }"
},
"_processed": true
}
6 回复
安卓上直接点击同样是这个问题，但是可以通过var maps = uni.createMapContext(id, this).$getAppMap();获取原生地图对象来获取，ios app 不行
在 uni-app 中使用 Map 组件时，如果你在 iOS 环境下绑定 @tap 事件并尝试获取点击地图的经纬度，可能会遇到无法获取经纬度的问题。这是因为 @tap 事件在 iOS 环境下并不直接提供经纬度信息。
要解决这个问题，你可以使用 @markertap 事件来获取标记点的经纬度，或者使用 @regionchange 事件来监听地图区域的变化。以下是一个示例代码，展示如何通过 @markertap 事件获取经纬度：
<template>
<view>
<map
id="map"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
@markertap="onMarkerTap"
></map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.909,
longitude: 116.39742,
markers: [
{
id: 1,
latitude: 39.909,
longitude: 116.39742,
name: '北京',
},
],
};
},
methods: {
onMarkerTap(e) {
const markerId = e.markerId;
const marker = this.markers.find(marker => marker.id === markerId);
if (marker) {
console.log('Marker tapped:', marker);
console.log('Latitude:', marker.latitude);
console.log('Longitude:', marker.longitude);
}
},
},
};
</script>
<style>
/* Add your styles here */
</style>