- 发布：2023-09-25 18:12
- 更新：2023-12-10 11:21
- 阅读：295
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 企业版
HBuilderX类型： 正式
HBuilderX版本号： 3.8.12
手机系统： 全部
手机厂商： 模拟器
手机机型： iphone6/7/8
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
App下载地址或H5⽹址： http://charging.zhcslyg.com:38901/charging/h5/index.html
测试过的手机：
示例代码：
<map id="amap" style="width: 100%; height:500px" :latitude="tmap.latitude" @tap="clickMap" @callouttap="clickCallouttap" @markertap="clickTmapMarker" :longitude="tmap.longitude" :markers="tmap.markers"> </map>
回调方法
clickCallouttap(evt){
console.log(evt)
},
clickTmapMarker(evt) {
console.log(evt)
}
数据
tmap: {
width: 25,
height: 30,
latitude: 34.606636,
longitude: 119.162756,
markers: [
{
id: 1,
width: 25,
height: 30,
latitude: 34.609071,
longitude: 119.163465,
total:'0',
joinCluster:false,
callout: {
id: 0,
content: '火车站停车场P1',
color:'#077cf8',
padding: 10,
borderRadius: 2,
display: 'ALWAYS'
},
iconPath: '/static/img/map_marker_0.png'
},
{
id: 1,
width: 25,
height: 30,
latitude: 34.605911,
longitude: 119.161478,
total:'',
joinCluster:false,
callout: {
id: 1,
content: '火车站停车场P2',
color:'#22D0AB',
padding: 10,
borderRadius: 2,
display: 'ALWAYS'
},
iconPath: '/static/img/map_marker_2.png'
}
]
}
<map id="amap" style="width: 100%; height:500px" :latitude="tmap.latitude" @tap="clickMap" @callouttap="clickCallouttap" @markertap="clickTmapMarker" :longitude="tmap.longitude" :markers="tmap.markers"> </map>回调方法
clickCallouttap(evt){
console.log(evt)
},
clickTmapMarker(evt) {
console.log(evt)
}数据
tmap: {
width: 25,
height: 30,
latitude: 34.606636,
longitude: 119.162756,
markers: [
{
id: 1,
width: 25,
height: 30,
latitude: 34.609071,
longitude: 119.163465,
total:'0',
joinCluster:false,
callout: {
id: 0,
content: '火车站停车场P1',
color:'#077cf8',
padding: 10,
borderRadius: 2,
display: 'ALWAYS'
},
iconPath: '/static/img/map_marker_0.png'
},
{
id: 1,
width: 25,
height: 30,
latitude: 34.605911,
longitude: 119.161478,
total:'',
joinCluster:false,
callout: {
id: 1,
content: '火车站停车场P2',
color:'#22D0AB',
padding: 10,
borderRadius: 2,
display: 'ALWAYS'
},
iconPath: '/static/img/map_marker_2.png'
}
]
}
操作步骤：
点击地图 上气泡
点击地图 上气泡
预期结果：
控制台 输入但是 对象里面 markerId 未NaN
控制台 输入但是 对象里面 markerId 未NaN
实际结果：
{
currentTarget:
dataset: {v-1cf27b2a: "", v1cf27b2a: ""}
id: "amap"
offsetLeft: 0
offsetTop: 0
proto: Object
detail:
markerId: NaN
proto: Object
target:
dataset: {v-1cf27b2a: "", v1cf27b2a: ""}
id: "amap"
offsetLeft: 0
offsetTop: 0
proto: Object
timeStamp: 0
type: "callouttap"
}
{
currentTarget:
dataset: {v-1cf27b2a: "", v1cf27b2a: ""}
id: "amap"
offsetLeft: 0
offsetTop: 0
proto: Object
detail:
markerId: NaN
proto: Object
target:
dataset: {v-1cf27b2a: "", v1cf27b2a: ""}
id: "amap"
offsetLeft: 0
offsetTop: 0
proto: Object
timeStamp: 0
type: "callouttap"
}
bug描述：
使用内置浏览器高德地图(手机,电脑浏览器访问都是一样结果) @callouttap="clickCallouttap"
clickCallouttap返回值里面markerId 是 NaN类型 无法获取到
@markertap点击图标事件可以返回 markerId
高德地图发出的请求 https://webapi.amap.com/maps?v=2.0
输出值见附件
