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

<script>
export default {
  data() {
    return {
      latitude: 37.87059,
      longitude: 112.55067,
      covers: [
        {
          latitude: 37.87059,
          longitude: 112.55067,
          iconPath: '../../static/location.png',
          callout: {
            content: 'test',
            color: '#fff',
            padding: 4,
            bgColor: '#0A97C6',
            borderRadius: 2,
            textAlign: 'center',
          },
        },
        {
          latitude: 37.87,
          longitude: 112.5506,
          iconPath: '../../static/location.png',
        },
        {
          latitude: 37.8701,
          longitude: 112.55,
          iconPath: '../../static/location.png',
        },
        {
          latitude: 37.86,
          longitude: 112.5496,
          iconPath: '../../static/location.png',
        },
      ],
      polyline: [
        {
          points: [
            { latitude: 37.87059, longitude: 112.55067 },
            { latitude: 37.87, longitude: 112.5506 },
            { latitude: 37.8701, longitude: 112.55 },
            { latitude: 37.86, longitude: 112.5496 },
          ],
          arrowLine: true,
          dottedLine: true,
          borderColor: '#cccccc',
        },
      ],
      polygons: [
        {
          points: [
            { latitude: 37.87059, longitude: 112.55067 },
            { latitude: 37.87, longitude: 112.5506 },
            { latitude: 37.8701, longitude: 112.55 },
            { latitude: 37.86, longitude: 112.5496 },
          ],
          strokeWidth: 0,
          strokeColor: '#00000000',
          fillColor: '#cce6ff88',
          zIndex: 0,
        },
      ],
    };
  },

  onLoad() {
    this.getLocation();
  },

  methods: {
    // 获取当前的地址位置
    // 注意用国测局的数据 map只支持gcj02
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
        },
      });
    },
  },
};
</script>
