
<template>
  <div>
      <div style="padding-bottom: 10px;">经度：{{center.lng}}  纬度：{{center.lat}}</div>
      <baidu-map v-if="mapVisible" v-bind:style="mapStyle" class="bm-view" ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6"
                 :center="center"
                 :zoom="zoom"
                 :scroll-wheel-zoom="true"
                 @ready="handler"
                 @click="getClickInfo"
                 @moving="syncCenterAndZoom"
                 @moveend="syncCenterAndZoom"
                 @zoomend="syncCenterAndZoom">
        <bm-view style="width: 100%; height:400px;"></bm-view>
<!--        :dragging="true" @dragend="markerMoved"-->
        <bm-marker :position="{lng: marker.lng, lat: marker.lat}">
        </bm-marker>
<!--        <bm-control>-->
<!--          <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">-->
<!--            <input type="text" placeholder="请输入搜索关键字" class="serachinput">-->
<!--          </bm-auto-complete>-->
<!--        </bm-control>-->
<!--        <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>-->
      </baidu-map>
  </div>
</template>
<script>
    import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'
    export default {
        components: {
            BaiduMap,
            BmControl,
            BmView,
            BmAutoComplete,
            BmLocalSearch,
            BmMarker
        },
        data: function () {
            return {
                keyword: '',
                mapStyle: {
                    width: '100%',
                    height: '400px'
                },
                // center: {lng: 116.404, lat: 39.915},
                zoom: 15,
                marker:{
                    lng:null,
                    lat:null
                }
            }
        },
        watch: {
            // mapdata: function (currentValue) {
            //     // this.showMapComponent = currentValue
            //     // if (currentValue) {
            //     //     this.keyword = ''
            //     // }
            // }
        },
        props: {
            center: {
                type: Object,
                default:()=>{
                    return {lng: null, lat: null}
                },
            },
            mapVisible:{
                type: Boolean,
                default:false,
            },
        },
        methods: {
            handler ({BMap, map}) {
                let that = this;
                if((this.center.lat == null || this.center.lat==0) && (this.center.lng == null||this.center.lng == 0)){
                    let myCity = new BMap.LocalCity();
                    myCity.get(function (result) {
                        that.center.lng = result.center.lng;
                        that.center.lat = result.center.lat;
                    })
                }
                else{
                    that.marker.lng = that.center.lng;
                    that.marker.lat = that.center.lat;
                }
            },
            /***
             * 地图点击事件。
             */
            getClickInfo (e) {
                // this.center.lng = e.point.lng;
                // this.center.lat = e.point.lat;
                // this.$emit('centerFn', this.center)
            },
            syncCenterAndZoom (e) {
                // const {lng, lat} = e.target.getCenter()
                // this.center.lng = lng
                // this.center.lat = lat
                // this.zoom = e.target.getZoom();
                // this.$emit('centerFn', this.center)
            },
            markerMoved(e){
                console.log(e);
                // this.center.lng = e.point.lng;
                // this.center.lat = e.point.lat;
                // this.$emit('centerFn', this.center)
            },
        }
    }
</script>

<style scoped>
  .serachinput{
    width: 300px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dddee1;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
  }
</style>
