<template>
  <view class="page-content">
    <view class="page-section page-section-gap">
      <map
        style="width: 100%; height: 1600rpx;"
        id="mymap"
        show-location
        enable-traffic
        show-compass
        :latitude="latitude"
        enable-3D
        :longitude="longitude"
        :markers="covers"
        :polyline="polyline"
        @markertap="ontouchMaker"
      ></map>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      longitude: 117.166483,
      latitude: 31.764309,

      polyline: [{
        points: [{
          latitude: 31.764325,
          longitude: 117.16659
        }, {
          latitude: 31.764309,
          longitude: 117.166482
        },
        {
          latitude: 31.764308,
          longitude: 117.166483
        },
        {
          latitude: 31.764312,
          longitude: 117.166488
        },
        {
          latitude: 31.764332,
          longitude: 117.166583
        }
        ],
        color: '#0AED4D',
        width: 3,
        borderWidth: 2,
      }],


      covers: [{
        id: 0,
        latitude: 39.909,
        longitude: 116.39742,
        iconPath: '../../static/img/60.jpg',
        width: 36,
        height: 36,
        alpha: 0.8
      }, {
        id: 1,
        latitude: 39.90,
        longitude: 116.39,
        iconPath: '../../static/img/28.png',
        width: 36,
        alpha: 0.8,
        height: 36
      }]
    }
  },
  onShow() {
  	    var mymap = uni.createMapContext('mymap', this)
  	    mymap.moveToLocation()
  	
  },
  onReady() {
    var mymap = uni.createMapContext('mymap', this)
    mymap.moveToLocation()

	},
	
  methods: {
    ontouchMaker(e) {
      console.log(e, e.detail)
      console.log(this.covers[e.detail.markerId])
    }

  }
}
</script>

<style scoped>
.page-content {
  min-height: 100%;
}

.logo {
  min-width: 100%;
  text-align: center;
}

.logo img {
  width: 200upx;
  height: 200rpx;
  background-size: contain;
  margin: auto;
}
</style>