<map
:latitude="centerLat"
:longitude="centerLng"
:enable-3D="true"
:markers="markers"
@markertap="onClick"
@callouttap="onClick"
/>
- 发布:2024-02-20 11:43
- 更新:2024-07-14 18:19
- 阅读:382
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 4.01
手机系统: Android
手机系统版本号: Android 14
手机厂商: 华为
手机机型: vivo
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
11
11
预期结果:
11
11
实际结果:
11
11
bug描述:
内置组件map的@callouttap事件,e.detail = {markerId}拿不到markerId,显示NaN
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
感谢反馈,你提到 hbuilderx 运行 vue3 项目在安卓平台拿不到 callouttap ,我验证下。
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
因为你提供的 demo 不完整,所以我提供我的可以直接运行的测试代码。
我使用下面的代码运行到 安卓平台,点击 label 文本 出现弹窗,点击弹窗内容。观察控制台发现 onMarkertap 和 onCallouttap 触发了,并且都可以打印 e.detail.markerId
请你运行我提供的 demo,验证我的说法,并提供我如何修改和验证你的问题。
<template>
<div>
<view>map demo</view>
<map :longitude="dot.longitude" :latitude="dot.latitude" show-location @callouttap="onCallouttap" :markers="markers"
@markertap="onMarkertap" style="outline: 1px solid red; width: 746rpx; height: calc(100vh - 200rpx)"></map>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from "vue";
const dot = { latitude: 39.916633014861084, longitude: 116.3198844199444 };
const dot2 = {
latitude: 39.919998434612495,
longitude: 116.31794540154829,
};
// 地图圆框
const circles = [
{
longitude: dot.longitude,
latitude: dot.latitude,
color: "#FF0000DD",
fillColor: "#7cb5ec88",
radius: 200,
strokeWidth: 1,
},
{
latitude: dot2.latitude,
longitude: dot2.longitude,
color: "#FF0000DD",
fillColor: "#7cb5ec88",
radius: 250,
strokeWidth: 1,
},
];
// markers 显示标记
const markers = [
{
id: 5,
longitude: dot.longitude,
latitude: dot.latitude,
width: 60,
height: 60,
title: "标注点名",
iconPath: "/static/logo.png",
rotate: 0, //45,
alpha: 0.5,
anchor: {
x: 0.5, // 0-1
y: 0.5,
},
iconLayout: {
params: {
count: "1",
},
src: "/static/marker_icon.xml",
},
label: {
content: "label 文本",
color: "#ff0000",
fontSize: 16,
// x,y
borderRadius: 10,
borderWidth: 2,
borderColor: "#000000",
bgColor: "#ffffff",
padding: 5,
textAlign: "center",
["aria-label"]: "标注地名23",
},
/** 有 customCallout 属性自动失效 */
callout: {
// 这里设置无效
content: "文本 11",
color: "#ff0000",
fontSize: 16,
borderRadius: 10,
borderWidth: 2,
borderColor: "#000000",
bgColor: "#ffffff",
padding: 5,
// display: "BYCLICK",
display: "ALWAYS", // BYCLICK
textAlign: "center",
anchorX: 0,
anchorY: 0,
},
// 普通自定义写法
__customCallout: {
type: 2,
descList: [
{
desc: "预计",
descColor: "#333333",
},
{
desc: "5分钟",
descColor: "#108EE9",
},
{
desc: "到达",
descColor: "#333333",
},
],
isShow: 1,
},
// 高级自定义写法
_customCallout: {
canShowOnTap: true,
layout: {
params: {
title: "标题栏",
bgColor: "#FF00FF",
},
src: "/static/marker_customcallout.xml",
},
layoutBubble: {
style: "bubble",
bgColor: "#898986",
borderRadius: 0,
},
},
},
];
// polyline 路线
const polyline = [
{
points: [
{
latitude: 39.92070131041505,
longitude: 116.31702092378805,
// name: "八一湖旅社"
},
{
latitude: 39.91831987978079,
longitude: 116.31675588473558,
name: "樱花湖",
},
{
latitude: 39.912221631121064,
longitude: 116.3193962250391,
// name: "世纪园"
},
],
color: "#FF0000DD",
width: 1,
dottedLine: false,
// arrowLine: true,
// arrowIconPath:"/static/logo.png",
borderColor: "#ffffff",
borderWidth: 1,
},
];
// onMounted(() => {
// console.log("map onMounted");
// });
onUnmounted(() => {
console.log("map onUnmounted");
});
const onRegionchange = (e : Event) => {
console.log("区域滚动,视野发生变化,onRegionchange--", e.type, e.target);
// console.log("区域滚动,onRegionchange--", e.type, e.target);
};
// onTap e
const onTap = (e : Event) => {
console.log("随意点击,onTap--");
// console.log("随意点击,onTap--", e.type, e.target);
};
const onUpdated = (e : Event) => {
console.log("onUpdated--", e.type, e.target);
};
const onAnchorpointtap = (e : Event) => {
console.log("onAnchorpointtap", e);
};
const onPoitap = (e : any) => {
console.log("建筑选中onPoitap--", e.target?.name, e.target);
};
const onMarkertap = (e : any) => {
console.log("选中了marker,onMarkertap, markerId:", e.detail.markerId);
};
const onLabeltap = (e : Event) => {
console.log("label 点击,onLabeltap", e);
};
const onCallouttap = (e : Event) => {
console.log("气泡点击,onCallouttap", e.detail.markerId);
};
const onControltap = (e : Event) => {
console.log("onControltap", e);
};
</script>
<style></style>
DCloud_UNI_OttoJi
看我下面回复,请你指出我如何复现和验证你的问题。
2024-05-13 11:53