SoulLyoko / vue-tianditu

天地图vue组件库
MIT License
88 stars 23 forks source link

天地图中的聚合Marker组件如何使用? #12

Closed rttg125 closed 3 years ago

rttg125 commented 3 years ago

您好,我想在系统中引用天地图的聚合Marker组件,该如何在本组件中集成使用?

    var zoom = 3;
    var map;
    function onLoad() {
        map = new T.Map('mapDiv', {
            attributionControl: false,
            inertia: false
        });
        map.centerAndZoom(new T.LngLat(116.40969, 37.43997405227057), zoom);

        var arrayObj = new Array();
        for (var i = 0; i < 500; i++) {
            var marker = new T.Marker(new T.LngLat(Math.random() * 40 + 85, Math.random() * 30 + 21), {title: i});
            arrayObj.push(marker);
        }
        var markers = new T.MarkerClusterer(map, {markers: arrayObj});
    }

SoulLyoko commented 3 years ago

您可以在地图初始化事件中获取到map实例,此时用官方示例中的代码就可以实现:

<tdt-map :center="center" :zoom="zoom" @init="mapInit">
......
methods:{
    mapInit(map) {
      const arrayObj = new Array();
      for (let i = 0; i < 500; i++) {
        const marker = new T.Marker(new T.LngLat(Math.random() * 40 + 85, Math.random() * 30 + 21), { title: i });
        arrayObj.push(marker);
      }
      const markers = new T.MarkerClusterer(map, { markers: arrayObj });
    }
}

或者待我稍后有空把这个组件集成进来

SoulLyoko commented 3 years ago

点聚合组件已更新,查看最新的文档来使用