【问题标题】:Here Maps zoom on cluster click这里地图放大集群点击
【发布时间】:2019-06-28 14:39:02
【问题描述】:

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

【问题讨论】:

    标签: javascript here-api


    【解决方案1】:

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

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

    【讨论】:

    • 我在 map.setCenter 和 map.setZoom 中使用了相同的“真实”动画标志,但是过渡没有平滑动画。你能找到我的问题吗? Here你可以看到我的地图使用 - 只需尝试点击标记。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-11
    • 1970-01-01
    • 2016-12-03
    • 1970-01-01
    • 2013-11-12
    相关资源
    最近更新 更多