mobile - DevExtreme Mobile のマーカー クラスタラー

Question

DevExtreme Mobile でアプリケーションを開発しています。アプリケーションでは、このアプリケーションで DXMap を使用します。DevExtreme モバイル アプリでマーカー クラスター構造を使用するにはどうすればよいですか?

Answer 1

Google Maps Marker Clusterer API を使用して、多数の DevExtreme dxMap マーカーのズームレベルごとのクラスターを作成および管理できます。次に例を示します。

 dxMap マーカー クラスタラー

この例は、Google Too Many Markers!で説明されているアプローチに基づいています。論文

サンプルコードは次のとおりです。

$("#dxMap").dxMap({
    zoom: 3,
    width: "100%",
    height: 800,
    onReady: function (s) {
        var map = s.originalMap;

        var markers = [];
        for (var i = 0; i < 100; i++) {
            var dataPhoto = data.photos[i];
            var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
            var marker = new google.maps.Marker({
                position: latLng
            });
            markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
    }
});