<template>
  <baidu-map 
    ak="A152f7aa11928ce39d45f69554d0f657"
    :scroll-wheel-zoom="false"
    :center="center"
    :zoom="zoom"
    @click="openMap"
    @ready="handler"
    class="map"
>
       <bm-marker @click="openMap" :position="markerPoint" :dragging="true" animation="BMAP_ANIMATION_DROP"/>
       <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
       <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"/>
  </baidu-map>
</template>
<script>
import {BaiduMap, BmOverlay, BmLabel, BmView,BmPointCollection, BmMapType, BmNavigation, BmGeolocation, BmMarker, BmInfoWindow} from "vue-baidu-map";
//import theme from '~/GraphApp/utils/theme'
//import Overlay from './overlay'
//import { mapState } from 'vuex'
export default {
  name:"",
  props: ["data"],
  //computed: mapState('DistributeModule', ["Points", "hospitalList"]),
  data () {
    return {
      zoom: 16,
      keyword: "",
      show: false,
      center: "贵阳",
      //theme: theme,
      markerPoint: {
        lat:this.data.latitude,
        lng:this.data.longitude
      }
    };
  },
  components: {
    BaiduMap,
    //BmOverlay,
    //BmView,
    //BmLabel,
    //BmPointCollection,
    //BmMapType,
    BmNavigation,
    BmGeolocation,
    BmMarker,
    //BmInfoWindow,
    //Overlay
  },
  methods: {
    openMap() {
      //
      wx.openLocation({
        latitude: this.data.latitude, // 纬度，浮点数，范围为90 ~ -90
        longitude: this.data.longitude, // 经度，浮点数，范围为180 ~ -180。
        name: this.data.name, // 位置名
        address: this.data.address, // 地址详情说明
        scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    handler ({BMap, map}) {
      this.BMap = BMap;
      this.map = map;
        
      setTimeout(() => {
        this.center = {
          lat:this.data.latitude,
          lng:this.data.longitude
        };
        this.markerPoint = {
          lat:this.data.latitude,
          lng:this.data.longitude
        };
      }, 2500);
      
      // map.setViewport([{
      //   lat:this.data.latitude,
      //   lng:this.data.longitude
      // }])
      //this.$store.commit('DistributeModule/INIT_MAP_INSTANCE', map)

      // setTimeout(() => {
      //     this.$store.dispatch('DistributeModule/fetchPositionList', {
      //         hospitalName: "",
      //         province: "贵州省",
      //         prefecture:"贵阳市"
      //     })
      // }, 500)
      
      //
      //this.center.lng = 106.6367843613
      //this.center.lat = 26.6527625307
      //this.zoom = 15
    },
    syncCenterAndZoom(e) {
      // const {lng, lat} = e.target.getCenter();
      // this.center.lng = lng;
      // this.center.lat = lat;
      // this.zoom = e.target.getZoom();
      // 
    }
  }
};
</script>
<style scoped>
  .map {
    width: 100%;
    height: 212px;
    position: relative;
    /*height: 800px;*/
  }
</style>