87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="编号开锁" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
|
height='36'></u-navbar>
|
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
|
:show-location='true' :polygons='polygons' :markers="markers" :polyline="polyline">
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#F7FAFE",
|
|
},
|
|
latitude: '39.916527',
|
|
longitude: ' 116.397128',
|
|
isMap: false,
|
|
zoomSize: 15,
|
|
markers: [{
|
|
id: 1,
|
|
latitude: 39.90469,
|
|
longitude: 116.40717,
|
|
title: 'Marker1'
|
|
}, {
|
|
id: 2,
|
|
latitude: 39.90969,
|
|
longitude: 116.41217,
|
|
title: 'Marker2'
|
|
}],
|
|
polyline: [{
|
|
points: [{
|
|
latitude: 39.916527,
|
|
longitude: 116.397128
|
|
}, {
|
|
latitude: 39.926527,
|
|
longitude: 116.397128
|
|
}, {
|
|
latitude: 39.926527,
|
|
longitude: 116.407128
|
|
}, {
|
|
latitude: 39.916527,
|
|
longitude: 116.407128
|
|
}],
|
|
width:8,
|
|
arrowLine:true,
|
|
color:'#00AF99'
|
|
// strokeWidth: 2,
|
|
// strokeColor: '#00AF99',
|
|
// fillColor: '#00AF99'
|
|
}, ],
|
|
polygons:[
|
|
{
|
|
points: [
|
|
{ latitude: 39.918527, longitude: 116.400128 },
|
|
{ latitude: 39.922527, longitude: 116.400128 },
|
|
{ latitude: 39.924527, longitude: 116.405128 },
|
|
{ latitude: 39.912527, longitude: 116.402128 }
|
|
],
|
|
strokeColor: '#00FF00DD', // 使用不同的颜色来区分第二个区域
|
|
strokeWidth: 2,
|
|
fillColor: '#00FF00DD'
|
|
}
|
|
]
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" >
|
|
page{
|
|
background-color: #F7FAFE;
|
|
}
|
|
.page{
|
|
width: 750rpx;
|
|
.map{
|
|
width: 750rpx;
|
|
height:100vh ;
|
|
}
|
|
}
|
|
</style>
|