<template>
  <map
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    :polygons="polygons"
    :polyline="polyline"
    id="map"
    ref="map"
    scale="12"
    show-location="true"
    style="width: 100%; min-height: 1000rpx;height:100%"
  />
</template>

<script>
export default {
  props: {
    markers: { type: Array, default: () => [] },
    polyline: { type: Array, default: () => [] },
    polygons: { type: Array, default: () => [] },
  },
  data() {
    return {
      latitude: 37.87059,
      longitude: 112.55067,
    };
  },
  watch: {
    markers: {
      deep: true,
      handler(value) {
        if (value && value.length) {
          const { latitude, longitude } = value[0];
          this.latitude = latitude;
          this.longitude = longitude;
        } else {
          this.latitude = 37.87059;
          this.longitude = 112.55067;
        }
      },
    },
  },
};
</script>
