<template>
  <view>
    <view class="mapbox">
      <map
        class="map"
        :markers="covers"
        :latitude="latitude"
        :longitude="longitude"
      ></map>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: '',
      longitude: '',
      covers: [],
    };
  },
  onLoad(option) {
    console.log(option);
    // var
    var res = option.lnglat.split(',');
    var obj = {};
    obj.latitude = Number(res[1]);
    this.latitude = Number(res[1]);
    obj.longitude = Number(res[0]);
    this.longitude = Number(res[0]);
    obj.title = option.basename;
    obj.id = 1;
    obj.callout = {
      //自定义标记点上方的气泡窗口 点击有效
      content: option.basename, //文本
      color: '#ffffff', //文字颜色
      fontSize: 14, //文本大小
      borderRadius: 2, //边框圆角
      bgColor: '#00c16f', //背景颜色
      display: 'ALWAYS', //常显
    };
    obj.iconPath =
      '../../static/images/distribution/f2df86753bf7c9e311a59f632f5c545.png';
    this.covers.push(obj);
    console.log(this.covers);
  },
  methods: {},
};
</script>

<style lang="scss">
.mapbox {
  width: 100%;
  height: 100vh;

  .map {
    width: 100%;
    height: 100%;

    ::v-deep .csssprite {
      display: none;
    }
  }
}
</style>
