<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="scale" 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: "#288dff",
					fillColor: "#288dff350",
				}]
			},
			scale() {
				if (this.radius > 20000) {
					return 9
				} else if (this.radius > 10000 && this.radius <= 20000) {
					return 10
				} else if (this.radius > 5000 && this.radius <= 10000) {
					return 11
				} else{
					return 12
				}
				
			}
		},
		data() {
			return {
				radius: 5000, //地图圈大小
				markers: [{
					id: '10001',
					latitude: '',
					longitude: '',
					iconPath: '../../static/address_center_icon.png',
					callout:{
						 content:'服务名',
						 display:'ALWAYS',//常显
					}
				}],
				address: '', //地址
				windowHeight: 0, //窗口高度
				num: 1, //公里
				showMap: false, //是否显示地图
				longitude: 0,
				latitude: 0,

			}
		},
		onLoad(options) {
			this.latitude = options.latitude
			this.longitude = options.longitude
			this.markers[0].latitude = options.latitude
			this.markers[0].longitude = options.longitude
			this.radius = Number(options.radius) * 1000
			this.markers[0].callout.content=options.name
			// console.log(options, '123123123',this.radius)
			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>
