<template>
	<view>
		<div>

			<gmap-map :center="centers" :zoom="11" map-type-id="terrain" style="width: 100%; height: 340px">

				<gmap-marker @dragend="updateMaker" :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true"
				 :draggable="true" @click="centers=m.position"></gmap-marker>
			</gmap-map>

		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				centers: {
					lat: '',
					lng: ''
				},
				markers: [{
					position: {
						lat: '',
						lng: ''
					}
				}],
				place: null,
				description: 'Autocomplete Example (#164)',
				longitude: '',
				latitude: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				covers: []
			}

		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.longitude = item.longitude;
			this.latitude = item.latitude;
			var cover = [];
			var cov = {};
			cov["latitude"] = item.latitude;
			cov["longitude"] = item.longitude;
			cov["iconPath"] = '../../static/img/map.png';
			cover.push(cov);
			cover.push(cov);
			this.markers[0].position = {
				lat: item.latitude,
				lng: item.longitude
			};
			this.centers={
				lat: item.latitude,
				lng: item.longitude
			};
		},
		methods: {
			setPlace(place) {
				this.place = place
			},
			setDescription(description) {
				this.description = description;
			},
			usePlace(place) {
				if (this.place) {
					var newPostion = {
						lat: this.place.geometry.location.lat(),
						lng: this.place.geometry.location.lng(),
					};
					this.center = newPostion;
					this.markers[0].position = newPostion;
					this.place = null;
				}
			},
			updateMaker: function(event) {
				console.log('updateMaker, ', event.latLng.lat());
				this.markers[0].position = {
					lat: event.latLng.lat(),
					lng: event.latLng.lng(),
				}
			},
		}
	}
</script>

<style>

</style>
