<template>

  <view class="content">

    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>

  </view>

</template>

<script>

  export default {

    data() {

      return {

        latitude: 23.099994,

        longitude: 113.324520,

img: require('../../static/map/hotel.png')

      }

    },

    onReady() {

      this._mapContext = uni.createMapContext("map", this);

      // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})

      this._mapContext.initMarkerCluster({

        enableDefaultStyle: false,

        zoomOnClick: true,

        gridSize: 60,

        complete(res) {

          console.log('initMarkerCluster', res)

        }

      });

      this._mapContext.on("markerClusterCreate", (e) => {

        console.log("markerClusterCreate", e);

      });

      this.addMarkers();

    },

    methods: {

      addMarkers() {

        const positions = [

          {

            latitude: 23.099994,

            longitude: 113.324520,

          }, {

            latitude: 23.099994,

            longitude: 113.322520,

          }, {

            latitude: 23.099994,

            longitude: 113.326520,

          }, {

            latitude: 23.096994,

            longitude: 113.329520,

          }

        ]

        const markers = []

        positions.forEach((p, i) => {

          console.log(i)

          markers.push(

            Object.assign({},{

              id: i + 1,

              iconPath: this.img,

              width: 50,

              height: 50,

              joinCluster: true, // 指定了该参数才会参与聚合

              label: {

                  width: 50,

                  height: 30,

                  borderWidth: 1,

                  borderRadius: 10,

                  bgColor: '#ffffff',

                  content: `label ${i + 1}`

              }

            },p)

          )

        })

        this._mapContext.addMarkers({

            markers,

            clear: false,

            complete(res) {

              console.log('addMarkers', res)

            }

        })

      }

    }

  }

</script>

<style>

  .content {

    flex: 1;

  }

  .map {

    flex: 1;

  }

</style>