<template>
	<div class="baiduMap">
		<baidu-map 
		class="bm-view" 
		:pinch-to-zoom='true'
		:center="center" 
		@load="onLoad"
		@ready="ready"
		:zoom="zoom">
			<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
			<bm-marker :position="{ lat: lat, lng: lng }" animation="BMAP_ANIMATION_BOUNCE">
			</bm-marker>
		</baidu-map>
	</div>
</template>

<script>
	export default {
		props: {
			center: {
				type: Object,
				default: {lng: 0, lat: 0}
			},
			zoom: {
				type: Number,
				default: 10
			},
		},
		name: 'BMap',
		data() {
			return {
				lat: 0,
				lng: 0
			}
		},
		watch: {
			center(n) {
				n = n || {}
				const {lat, lng} = n
				this.lat = lat
				this.lng = lng
			}
		},
		methods: {
			// 初始化
			init() {
				
			},
			onLoad(res) {
				this.lat = res.point.lat;
				this.lng = res.point.lng;
			},
			ready({BMap, map}) {
				this.$emit('ready', BMap, map)
			}
		},
	}
</script>

<style lang="scss">
	.bm-view {
		height: 425px;
	}
</style>
