在这里，地图放大群集点击 [英] Here Maps zoom on cluster click

问题描述

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

I'm using clustering on a Here Maps instance and it works, the clusters are shown, but I can't find a way to zoom when I click on one of them to show the markers contained. Is it possible or the only way is to manually zoom with the mouse wheel or the zoom buttons?

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

This is how I create the clusters and show them on the map

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);

推荐答案

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

I've found out how to zoom when you click on a cluster icon, here is my solution:

// 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);

这篇关于在这里，地图放大群集点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！