在map组件文档中，下图可以看到说不支持
同一篇文档，下图看起来又是支持的
我的问题：安卓和ios端是否支持高德地图marker的customCallout？如果支持，如何使用?
_Nora_
- 发布：2022-07-25 19:40
- 更新：2022-08-01 19:40
- 阅读：1043
参考代码，后续补充文档
<template>
<view class="content">
<map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
:latitude="location.latitude" :show-location="showLocation" :rotate="rotate" :skew="skew" show-scale="true"
:markers="markers" enable-building=true enable-indoorMap="true" @callouttap="oncallouttap">
<cover-view slot="callout">
<cover-view marker-id="1">
<cover-image class="icon" src="/static/logo.png"></cover-image>
<cover-view class="test">
customCallout
</cover-view>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
const testMarkers = [{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '/static/gif.gif',
width: 40,
height: 40,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius: 2,
borderWidth: 0,
borderColor: '#333300',
bgColor: '#CCFF11',
padding: '1',
display: 'ALWAYS'
},
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS'
}
}];
module.exports = {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '/static/logo.png',
clickable: true
}],
showLocation: false,
scale: 13,
enableZoom: true,
polyline: [],
markers: testMarkers,
polygons: [],
circles: [],
includePoints: [],
rotate: 0,
skew: 0
}
},
methods: {
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
width: 750rpx;
height: 250px;
background-color: #f0f0f0;
}
.icon {
width: 20px;
height: 20px;
}
.scrollview {
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
-
-
-
-
麻烦看一下，这段代码在微信小程序上是正常的，但是在app上，气泡会跑到地图左上去
<template>
<view class="content">
<map id="map" :markers="testMarkers" class="map" :show-location="true" :latitude="location.latitude"
:longitude="location.longitude" @callouttap="oncallouttap">
<cover-view slot="callout">
<template v-for="(item,index) in testMarkers">
<cover-view :marker-id="item.id">
<cover-image class="icon" src="../../static/image/3.png"></cover-image>
<cover-view>
{{item.id}}
</cover-view>
</cover-view>
</template>
</cover-view>
</map>
</view>
</template>
<script setup>
const testMarkers = [{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
iconPath: '../../static/image/location2.png',
width: 40,
height: 40,
customCallout: {
display: "ALWAYS"
}
},
{
id: 2,
latitude: 39.9096920000,
longitude: 116.3984770000,
iconPath: '../../static/image/location2.png',
width: 40,
height: 40,
customCallout: {
display: "ALWAYS"
}
}
]
let location = {
longitude: 116.3974770000,
latitude: 39.9086920000
}
function oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
</script>
<style>
.map {
width: 750rpx;
height: 800px;
background-color: #f0f0f0;
}
.content {
flex: 1;
}
.icon {
width: 20px;
height: 20px;
}
.map {
width: 750rpx;
height: 500px;
}
.customCallout {
background-color: #aaffff;
border: 1px solid #ff5500;
border-radius: 30px;
width: 200px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.test {
width: 200px;
background-color: aliceblue;
}
</style>2024-06-19 14:23
_Nora_ (作者)
谢谢，已看到文档更新。不过只说了nvue支持，未说明如何使用。
2022-07-26 23:23