<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>