<template>
<view style="flex: 1;">
<map id="map" :enablePoi="mapConf.enablePoi" :showLocation="mapConf.showLocation" :scale="mapConf.scale"
:enableTraffic="mapConf.enableTraffic" :enable-overlooking="true" :enableBuilding="mapConf.enableBuilding"
class="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="markers"
:showScale="mapConf.showScale" @regionchange="regionchange" @callouttap="markerTap">
<cover-view slot="callout" v-if="markers.length>0">
<cover-view v-for="(item,index) in markers" :marker-id="item.id" style="width: 50rpx;height: 50rpx;">
<text class="place-sort">{{item.id}}</text>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 121.39973280164931,
latitude: 31.167666829427084,
mapConf: {
isPulling: true,
enablePoi: false, //是否展示 POI 点
showLocation: false, // 显示带有方向的当前定位点
enableTraffic: true, //是否开启实时路况
showScale: false,
enableBuilding: true,
scale: 16,
},
markers: [{
"id": 0,
"latitude": "31.167666829427084",
"longitude": "121.39973280164931",
"iconPath": "/static/images/route/tou.png",
"width": 32,
"height": 32,
"customCallout": {
"anchorY": 24,
"anchorX": 0,
"display": "ALWAYS"
}
},
{
"id": 1,
"latitude": "31.128817",
"longitude": "121.432647",
"iconPath": "/static/images/route/tou.png",
"width": 22,
"height": 22,
"customCallout": {
"anchorY": 24,
"anchorX": 0,
"display": "ALWAYS"
}
},
{
"id": 2,
"latitude": "31.115505",
"longitude": "121.458106",
"iconPath": "/static/images/route/tou.png",
"width": 22,
"height": 22,
"customCallout": {
"anchorY": 24,
"anchorX": 0,
"display": "ALWAYS"
}
},
{
"id": 3,
"latitude": "31.193771",
"longitude": "121.434787",
"iconPath": "/static/images/route/tou.png",
"width": 22,
"height": 22,
"customCallout": {
"anchorY": 24,
"anchorX": 0,
"display": "ALWAYS"
}
}
],
}
}
}
</script>
<style>
.map {
width: 750rpx;
flex: 1;
}
.place-sort {
background-color: #fff;
font-size: 28rpx;
border-radius: 50rpx;
color: #fff;
border: 4rpx solid #fff;
background-color: red;
width: 50rpx;
height: 50rpx;
font-weight: bold;
text-align: center;
}
</style>
y***@163.com
- 发布:2023-07-27 14:06
- 更新:2023-07-27 14:06
- 阅读:182
0 个回复