<template>
   <div id="map" style="width:100%;height:500px" ></div>
</template>

<script>
// import L from 'leaflet'
// import {tiledMapLayer} from '@supermap/iclient-leaflet';
// import 'leaflet/dist/leaflet.css'
// import '@supermap/iclient-leaflet'
// import 'leaflet/dist/leaflet'
export default {
  name: 'testMap',
  data() {
    return {
      list:[]
    }
  },
  mounted() {
    window.addEventListener('click',this.handleMousedown)
    // 开启一个监听
    var map, url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
    map = L.map('map', {
      maxZoom: 25,
      minZoom: 3,
      center: [35, 110],
      zoom: 3,
      crs: L.CRS.EPSG3857,
    })

    new L.supermap.tiledMapLayer(url).addTo(map);
    let _this = this;
    var poiSearch = new L.supermap.Components.Search({
            isGeoCoding: !window.isLocal,
            perPageDataNum: 6,  // 每页显示数据个数
            //设置结果图层样式：
            style: function (feature, latLng) {
              _this.list.push({
                name:feature.properties.name,
                address:feature.properties.address,
                pos:feature.geometry.coordinates
              })
                if (latLng && feature instanceof L.latLng || feature.geometry.type.toLowerCase() === "point") {
                    return L.circleMarker(latLng, {
                        fillColor: '#0083cb',
                        weight: 1,
                        opacity: 1,
                        color: '#0083cb',
                        fillOpacity: 0.6
                    });
                }
            },
            onClick:function(e){
              console.log(e)
            }
        });
        poiSearch.addTo(map);
  },
  methods: {
    handleMousedown(e){
      setTimeout(()=>{
        let dom = document.querySelector('.component-search__resultitme>.component-search__resultitme-selected').nextElementSibling
        if(dom){
        let _name = dom.innerText.replace(/(\t|[A-Za-z])/g,'').split('\n')[0]
        let _item = this.list.find(item =>{
          return item.name == _name
        })
        console.log(_item.name)
      }
      },100)
    },
  }
}
</script>
<style scope>
</style>