<template>
  <div>
    <baidu-map class="map" :center="{ lng: info.lon, lat: info.lat }" :zoom="16" ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6">
      <bm-marker :position="{ lng: info.lon, lat: info.lat }" animation="BMAP_ANIMATION_BOUNCE" :offset="{ width: -4, height: 8 }" @click="showInfo"></bm-marker>
      <bm-info-window :position="{ lng: info.lon, lat: info.lat }" :show="showInfos" @close="infoWindowClose">
        <img style="width: 220px" src="http://www.anti-cancer.com.cn/Sites/Uploaded/Image/2021/02/226374961128419003782693483.jpg" alt="" />
        <p style="margin: 0; padding-top: 10px"><img src="./../assets/dianhua.png" style="width: 14px; margin-right: 10px" />电话：400-0371-818</p>
        <p><img style="width: 14px; margin-right: 10px" src="./../assets/daohangdizhi.png" />地址：河南省郑州市东明路127号</p>
      </bm-info-window>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap, BmMarker, BmInfoWindow, BmNavigation } from 'vue-baidu-map';
export default {
  name: 'mapMarker',
  components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
    BmNavigation,
  },
  data() {
    return {
      address: '',
      showInfos: true,
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return { lng: null, lat: null };
      },
    },
  },
  methods: {
    infoWindowClose() {
      this.showInfos = false;
    },
    showInfo() {
      this.showInfos = true;
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 498px;
}
</style>
