<template>
	<view class="map-container">
		<map
			id="map" 
			:latitude="latitude" 
			:longitude="longitude" 
			scale="12" 
			show-compass 
			show-location 
			:markers="covers"
			:polyline="polyline"
			style="width: 100%; height:100%;">
		</map>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				latitude: null,  //  纬度
				longitude: null,  //  经度
				covers: [
					{
						latitude: 34.211901,  // 雁塔区
						longitude: 108.995039,
						width: '72rpx',
						height: '72rpx',
						title: '21',
						iconPath: '/static/logo.jpg'
					}, {
						latitude: 34.296789,
						longitude: 108.971456,
						width: '72rpx',
						height: '72rpx',
						title: '22',
						label: {content:'文本1', color: '#ff0000'},
						iconPath: '/static/logo.jpg'
					}, {
						latitude: 34.293145,  //  未央区政府
						longitude: 108.946715,
						width: '72rpx',
						height: '72rpx',
						title: '23',
						iconPath: '/static/logo.jpg'
					}, {
						latitude: 34.313445,  //  灞桥区
						longitude: 109.018233,
						width: '72rpx',
						height: '72rpx',
						title: '24',
						iconPath: '/static/logo.jpg'
					}
				],
				polyline: null  //  路线
			}
		},
		onShow() {
			this.getLocation()
		},
		methods: {
			//  获取当前位置
			getLocation(){
				const _this = this
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						console.log(res.latitude,res.longitude)
						_this.latitude = res.latitude  //  纬度
						_this.longitude = res.longitude  //  经度
						_this.onPolyline()
				    }
				})
			},
			//  连线
			onPolyline(){
				const _this = this
				//  连线需至少两个点
				if(_this.covers.length>0){
					_this.polyline = []
					_this.covers.map((item,index) => {
						_this.polyline.push({
							points: [
								{latitude: null, longitude: null},
								{latitude: null, longitude: null}
							],
							width: 4,
							color: '#'+(~~(Math.random()*(1<<24))).toString(16)
						})
						if(index==0){
							_this.polyline[index].points[0].latitude = _this.latitude
							_this.polyline[index].points[0].longitude = _this.longitude
							_this.polyline[index].points[1].latitude = item.latitude
							_this.polyline[index].points[1].longitude = item.longitude
						}else{
							_this.polyline[index].points[0].latitude = _this.covers[index-1].latitude
							_this.polyline[index].points[0].longitude = _this.covers[index-1].longitude
							_this.polyline[index].points[1].latitude = item.latitude
							_this.polyline[index].points[1].longitude = item.longitude
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map-container {
		width: 100%;
		height: 100vh;
	}
</style>
