uni-app 地图 的 气泡点与标签显示
2022-05-17 本文已影响0人
加冰宝贝
整体写法如下:
<template>
<view class="index-sign-up bg-ff">
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers"
:scale="14" :enable-building="true"></map>
</view>
</template>
<script>
export default {
data() {
return {
title: 'map',
latitude: 22.545809,
longitude: 113.985274,
covers: [{
address: '广东省深圳市南山区沙河街道星河街社区侨城西街',
title: '深圳欢乐谷',
id: 11,
latitude: 22.545809,
longitude: 113.985274,
iconPath: "/static/img/wz.png", //图标路径 图标路径需要后台生成
width: 29,
height: 29,
callout: { //marker气泡
content: '深圳欢乐谷',
bgColor: "rgba(255,255,255,0.71)",
borderRadius: 4,
padding:8,
fontSize: 16,
color: "#000000",
textAlign: "center",
display: 'ALWAYS',
x:110,
y:110
},
label: {//标签设置
content: '深圳欢乐谷',
bgColor: "rgba(255,255,255,0.71)",
borderWidth: 1,
borderColor: '#A5A5A5',
borderRadius: 4,
padding: 8,
fontSize: 16,
color: "#000000",
textAlign: "center",
x: 0,
y: 0,
anchorX: 0,
anchorY: 0
}
}],
}
},
onLoad() {
uni.getLocation({
type: 'wgs84',
success: function(res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
},
complete: (res) => {
console.log(res);
}
});
},
}
</script>
<style lang="scss" scoped>
.index-sign-up {
width: 100%;
height:100vh;
overflow: hidden;
map {
width: 100%;
height: 80vh;
}
}
</style>