尝试创建一个没有示例的集群,但是addLayer不确定

时间:2018-08-17 16:42:53

标签: javascript here-api

Here API clustering error: "addLayer is not defined"

错误,我正在调用函数startClustering,但出现错误map.addLayer未定义。

我认为也许地图对象失去了上下文范围,但是如何传递正确的范围才能从地图访问addLayer函数。

    //Boilerplate map initialization code starts below:
    var defaultLayers = platform.createDefaultLayers();

    var map = new H.Map(document.getElementById('map'),
        defaultLayers.normal.map, {
            center: {
                lat: -19.9211375,
                lng: -43.9490617,
            },
            zoom: 6
        });

 var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    // create default UI with layers provided by the platform
    var ui = H.ui.UI.createDefault(map, defaultLayers, 'pt-BR');

function startClustering(map, data) {
            var dataPoints = data.map(function (item) {
                return new H.clustering.DataPoint(item.coords.lat, item.coords.lng);
            });

            var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
                clusteringOptions: {
                eps: 32,
                minWeight: 2
                }
            });

            var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);

            map.addLayer(clusteringLayer);
    }

startClustering(map, travelData);

1 个答案:

答案 0 :(得分:1)

我无法重现您观察到的“ addLayer未定义” 错误。由于您没有提供完整的清单(例如,未定义 travelData ),所以我怀疑此代码示例中可能没有演示该问题,以帮助您进行调试。

您似乎遵循了文档中的集群示例:

https://developer.here.com/api-explorer/maps-js/v3.0/clustering/marker-clustering

即使您怀疑范围问题,也无需将其包装在函数中。例如,这对我有用:

var platform = new H.service.Platform({
    'app_id': 'your-app-id',
    'app_code': 'your-app-code',
    });

var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.normal.map, {
        center: {lat: -19.9211375,
                 lng: -43.9490617},
        zoom: 6,
    });

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

var ui = H.ui.UI.createDefault(map, defaultLayers, 'pt-BR');

var travelData = [
    {lat: -19.8211, lng: -43.9490617},
    {lat: -19.7211, lng: -43.9490617},
    {lat: -19.6211, lng: -43.9490617},
    {lat: -19.5211, lng: -43.9490617},
    {lat: -19.4211, lng: -43.9490617},
    {lat: -19.3211, lng: -43.9490617},
];

var dataPoints = travelData.map(function(item) {
    return new H.clustering.DataPoint(item.lat, item.lng);
});

var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    clusteringOptions: {eps: 32, minWeight: 2 }
});

var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
map.addLayer(clusteringLayer);

它与我简化的travelData并不完全相同,因此可能取决于您的数据集。还要确保在HTML中包含mapjs-clustering.js脚本,尽管如果出现问题,则会看到类似“ H.clustering is undefined” 之类的错误。