<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>
uniapp 地图marker和callout的展示
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 微信小程序地图实现点击气泡,展示callout,开发过程中遇到的需求,大致就和共享单车那个差不多,在很多个mark...
- uniapp nvue页面 实现地图上有多个makers,makers的callout自定义实现展示,包含图片文字...
- 最近项目用到腾讯地图,才发现网上关于腾讯地图的文章极少,难道是太简单了?因为项目需求,要实现一些效果,打开腾讯地图...
- [转]百度地图点聚合MarkerClusterer移动地图时,Marker的Label丢失的问题[https://...
- 在用到高德地图的时候,尤其出行类,有起点和终点marker,需要显示,假如一个在北京,一个在南京,那么这时候,2个...