1

我正在 DevExtreme Mobile 中开发一个应用程序。在应用程序中，我在此应用程序中使用 DXMap。如何在 DevExtreme 移动应用程序中使用标记聚类器结构？

4

2 回答 2

0

您可以使用 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);
    }
});
于 2016-03-07T10:41:12.873 回答
0

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。你可以在这里找到它们。

于 2019-05-11T08:34:14.417 回答