<template>
	<view style="width: 750rpx;">
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				查看服务范围
			</block>
		</cu-custom>
		<map v-if="showMap" id="map" show-location ref="map" :latitude="latitude" :longitude="longitude"
			:show-compass="true" :circles="circles" scale="12" style="width: 750rpx; "
			:style="{height:windowHeight+'px'}" :markers="markers"></map>
	</view>
</template>

<script>
	var map;
	export default {
		computed: {
			circles() {
				return [{
					latitude: this.latitude,
					longitude: this.longitude,
					radius: this.radius,
					strokeWidth: 2,
					color: "#fc3535",
					fillColor: "#fc353518",
				}]
			}
		},
		data() {
			return {
				markers: [{
					id: '10001',
					latitude: 31.316579,
					longitude: 120.67781,
					iconPath: '../../static/address_center_icon.png'
				}],
				address: '', //地址
				windowHeight: 0, //窗口高度
				num: 1, //公里
				showMap: false, //是否显示地图
				longitude: 0,
				latitude: 0,
				radius: 5000 //地图圈大小
			}
		},
		onLoad(options) {
			this.latitude=options.latitude
			this.longitude = options.longitude
			this.radius=options.serviceDistance
			// this.latitude = 31.316579
			// this.longitude = 120.67781
			// this.radius = 5000
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			});
			map = uni.createMapContext('map', this)
			if (this.longitude !== 0) {
				this.showMap = true
			}
		},
		methods: {},

		created() {
			//获取手机信息
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			});
			map = uni.createMapContext('map', this)
			// uni.getLocation({
			// 	geocode: true,
			// 	type: 'gcj02',
			// 	success: (res) => {
			// 		console.log(res)
			// 		this.latitude = res.latitude
			// 		this.longitude = res.longitude
			// 		if (this.longitude !== 0) {
			// 			this.showMap = true
			// 		}

			// 	}
			// })
		}
	}
</script>

<style>


</style>
