Question

我在DevExtreme Mobile中开发应用程序。在应用程序中，我在此应用程序中使用DXMap。如何在DevExtreme Mobile App中使用marker clusterer结构？

Answer 1

您可以使用Google Maps Marker Clusterer API为大量DevExtreme 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);
    }
});

Answer 2

kry是要使用Google Maps API。我是为我的应用做的，这是怎么做的。

这是html，非常简单：

<div data-options="dxView : { name: 'map', title: 'Punti vendita', pane: 'master', secure:true } ">
    <div data-bind="dxCommand: { id: 'back', behavior: 'back', type: 'back', visible: false }"></div>
        <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div style="width: 100%; height: 100%;">


            <div data-bind="dxMap:options"></div> <!--this for the map-->

            <div id="large-indicator" data-bind="dxLoadIndicator: {height: 60,width: 60}" style="display:inline;z-index:99;" />
            <div data-bind="dxPopover: {
                    width: 200,
                    height: 'auto',
                    visible: visible,
                }">
            </div>
        </div>
    </div>
</div>

页面加载后，应用会读取gps坐标：

function handleViewShown() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    jQuery("#large-indicator").css("display", "none"); //this is just a gif to indicate the user to wait the end of the operation
}

如果正确读取了gps位置，则保存坐标（地图中心）：

function onSuccess(position) {
    var lat1 = position.coords.latitude;
    var lon1 = position.coords.longitude;
    center([lat1, lon1]);
}

这些是我为dxMap设置的选项：

options: {
    showControls: true,
    key: { google: "myGoogleApiKey" },
    center: center,
    width: "100%",
    height: "100%",
    zoom: zoom,
    provider: "google",
    mapType: "satellite",
    autoAdjust: false,
    onReady: function (s) {
        LoadPoints();
        var map = s.originalMap;
        var markers = [];
        for (var i = 0; i < MyPoints().length; i++) {
            var data = MyPoints()[i];
            var latLng = new google.maps.LatLng(data.location[0], data.location[1]);
            var marker = createMarker(latLng, data.title, map, data.idimp);
            markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'images/m' });
    }
},

在其中填充了MyPoints的地方调用了LoadPoints：

function LoadPoints() {
    $.ajax({
        type: "POST",
        async:false,
        contentType: "application/json",
        dataType: "json",
        url: myApiUrl,
        success: function (Response) {
            var tempArray = [];
            for (var point in Response) {
                var location = [Response[p]["latitudine"], Response[p]["longitudine"]];
                var title = Response[p]["name"] + " - " + Response[p]["city"];
                var temp = { title: title, location: location, tooltip: title, onClick: GoToNavigator, idpoint: Response[p]["id"] };
                tempArray.push(temp);
            }

            MyPoints(tempArray);

        },
        error: function (Response) {
            jQuery("#large-indicator").css("display", "none");
            var mex = Response["responseText"];
            DevExpress.ui.notify(mex, "error");
        }
    });
}

请注意，在Myproject.Mobile/images文件夹中，我包含了图像m1.png，m2.png，m3.png，m4.png和m5.png。您可以找到它们here。

DevExtreme Mobile中的Marker Clusterer

2 个答案: