在这里地图放大群集点击

时间:2019-06-28 14:39:02

标签: javascript here-api

我在Here Maps实例上使用聚类,并且可以正常工作,显示了聚类,但是当我单击其中一个聚类以显示其中的标记时,找不到缩放方法。是否可以或唯一的方法是使用鼠标滚轮或缩放按钮进行手动缩放?

这就是我创建聚类并将其显示在地图上的方式

let map = new H.Map(document.getElementById('map'),
            defaultLayers.normal.map,{
                center: {lat:{{ $map_center['lat'] }}, lng:{{ $map_center['lng'] }}},
                zoom: 4
        });

let sCluster = [];

// the coordinates come from an AJAX call
$.each(data,function(i, v) {
    let coord = {lat:parseFloat(v["lat"]),lng:parseFloat(v["lng"])};

    sCluster.push(new H.clustering.DataPoint(parseFloat(v["lat"]),parseFloat(v["lng"])));
});

let clusteredSugProvider = new H.clustering.Provider(sCluster,{
    clusteringOptions: {
        strategy: H.clustering.Provider.Strategy.GRID,
        eps: 64,
        minWeight: 2
    }
});

let layer = new H.map.layer.ObjectLayer(clusteredSugProvider);

map.addLayer(layer);

1 个答案:

答案 0 :(得分:0)

我发现了单击群集图标时如何缩放,这是我的解决方案:

// add a listener to the cluster which triggers on a tap event
clusteredSugProvider.addEventListener('tap', function (evt) {

    // get the data of the object clicked
    let cnt = evt.target.getData();

    // if those data contain a data object it was a marker to be clicked
    // mine has a string (not yet set in the code above) which I show inside an InfoBubble
    if ( typeof cnt.a.data !== 'undefined' ) {
        let bubble =  new H.ui.InfoBubble(evt.target.getPosition(), {
            content: cnt.a.data.content
        });
        ui.addBubble(bubble);
    } else {
        // otherwise it was a cluster icon which doesn't contain a data object
        // set the map center to the coordinates where the user clicked
        // "true" is to have a smooth transition
        map.setCenter(
            map.screenToGeo(
                evt.currentPointer.viewportX, 
                evt.currentPointer.viewportY
            ),
            true
        );
        // increase the zoom level by an amount which fits your needs
        // again "true" is to have a smooth transition
        map.setZoom(map.getZoom()+2, true);
    }
}, false);