
<template>
  <div class="masp">
      <baidu-map  v-bind:style="mapStyle" class="bm-view" ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6"
                 :center="center"
                 :zoom="zoom"
                 @ready="handler"  v-if="showMap">
      </baidu-map>
<!--    NrLbL2aeZt498SvprdsIXGzPoa9qOOEr-->
  </div>
</template>
<script>
    import {BaiduMap} from 'vue-baidu-map'
    export default {
        components: {
            BaiduMap
        },
      props: {
        mapdata: {
          type: Object,
          default:()=>{
            return {}
          },
        },
        showMap:{
          type: Boolean,
          default:false
        }
      },
        data: function () {
            return {
                keyword: '',
                mapStyle: {
                    width: '100%',
                    height: '400px'
                },
              address:{
                address:"",
                addressComponents:""
              },
                center: {lng: 116.404, lat: 39.915},
                zoom: 15,
                marker:{
                    lng:null,
                    lat:null
                }
            }
        },
      created() {

      },
      methods: {
            handler ({BMap}) {
                let that = this;
                let myGeo = new BMap.Geocoder();
              setTimeout(()=>{
                myGeo.getLocation(new BMap.Point(that.mapdata.lng,that.mapdata.lat), function (result) {
                  console.log(result)
                  if (result) {
                    if(result.surroundingPois.length>0){
                      that.address.address=result.address+result.surroundingPois[0].title
                    }else{
                      that.address.address=result.address+result.business
                    }
                    that.address.addressComponents=result.addressComponents.city
                    that.$emit('centerFn', that.address)
                  }})
              })

            }
        }
    }
</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;
  }
  .masp{
    position: fixed;
    left: -99999px;
  }
</style>
