Question

我使用以下代码创建了leaflet map。在此地图中，标记与各自的端口的纬度和经度一起放置，在此示例中，这些端口被硬编码为隐藏字段。

在使用leaflet之前，我们使用了google maps。由于某些原因，我们需要切换到leaflet map。在google map中，另一个世界地图中出现的最接近经纬度的地图为merged。但是，在leaflet map中，markers放置在different世界地图中，而不是在SINGLE World map中。

传单地图例如：

标记在另一个世界地图中呈现。

Google地图（提供/合并到单个地图）：

在这里，在Google地图上方，两个世界地图标记合并为一个。即最近的经纬度，如下所示。

是否有任何方法可以将放置在另一张世界地图中的标记合并/汇集在一起，例如Google地图？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Leaflet Map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
 <style>
    #map {
        width: 960px;
        height: 500px;
        float: left;
    }


    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
   #map {
        width: 1600px;
        height: 320px;
        margin-top: 2%;
        border: 1px solid #ccc;
        padding: 5px;
    }
</style>

</head>
<body>
    <form id="form1" runat="server">
       <div>
        <asp:HiddenField ID="hdnportsequence" runat="server" Value="1" ClientIDMode="Static" />
        <asp:HiddenField ID="hdndata" runat="server" Value="" ClientIDMode="Static" />      
        <div style="text-align:center;font-weight:bold;">         
            <div id="map">
            </div>
        </div>
    </div>
    <script>
        var timer = 3000;
        var array = [];
        $(document).ready(function () {
            console.log("document is loaded..");
            initialize();
            var map = L.map('map', { scrollWheelZoom: true, worldCopyJump: true }).setView([43.64701, -79.39425], 10);
            var positron = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
                maxZoom: 7
            }).addTo(map);

            var firefoxIcon = L.icon({
                iconUrl: 'images/marker-icon.png',
                iconSize: [30, 40], // size of the icon
                popupAnchor: [13, 12],

            });

            var popup = L.popup({
                maxWidth: 200,
                maxHeight: 200,
            });

            var myIcon = L.divIcon({ className: 'my-div-icon' });
            L.marker([50.505, 30.57], { icon: myIcon }).addTo(map);
            var route = L.featureGroup();
            for (var j = 0; j < array.length; j++) {
                var val = array[j];
                var seq = val.toString().split('|')[0];
                var lat = val.toString().split('|')[1];//.slice(4);
                var long = val.toString().split('|')[2];
                var marker = new L.Marker([lat, long], { icon: firefoxIcon }).addTo(map).bindPopup(seq.toString());//.openPopup();
                route.addLayer(marker);

            }

            map.fitBounds(route.getBounds());
            map.panInsideBounds(route.getBounds());
            map.addLayer(route);

        });

        var mapOptions;
        var map;
        var image_red;
        var image_redLarge;
        var myLatlngCentral;

        var bounds;
        var loc;
        var inc = 0;
        var portcode;
        function CustomOutput(txt) {
            var obj = {};
            var txtArr = txt.split(',');
            $.each(txtArr, function (index, val) {
                var keys = Object.keys(obj);
                if (keys && keys.length > 0) {
                    if (keys.indexOf(val.trim()) > -1) {
                        obj[val.trim()] = obj[val.trim()] + '|' + (index + 1);
                    }
                    else {
                       obj[val.trim()] = index + 1;
                    }
                }
                else {

                    obj[val.trim()] = index + 1;
                }

            });

            var keys = Object.keys(obj);
            var output = "";
            $.each(keys, function (index, val) {
                output += val + ":" + obj[val] + ",";
            });

            return output;
        }

        function initialize() {
            var id = '';
            var datacsv = '';
            id = $("#<%= hdnportsequence.ClientID %>").val();
            datacsv = $("#<%= hdndata.ClientID %>").val();
            var lastitemnumber = datacsv.split(',');
            var input = datacsv;
            var latlongwithseq = CustomOutput(datacsv);
            console.log(" ID: " + id);
            console.log('latlongwithseq :' + latlongwithseq);
            datacsv = latlongwithseq;
            if (datacsv) {
                inc = 0;
                var latlong = datacsv.split(',');              
                $.each(latlong, function (index, value) {
                    var lat = value.split(':')[0].slice(4);
                    var long = value.split(':')[1];
                    var seq = value.split(':')[2];
                    index = index + 1;
                    if (seq) {
                        seq = seq.split('|').join(',');
                    }
                    if (parseFloat(lat) != 0.0 && parseFloat(long) != 0.0) {

                        inc++;
                        var isvalid = false;
                        if (inc == 1) {
                            isvalid = true;
                        }
                        else if (index != latlong.length) {
                            isvalid = true;

                        }

                        if (isvalid) {
                            if (seq != undefined && seq.split(',').length == 1) {
                                seq = parseInt(seq);
                            }
                            sendlatlang(lat, long, seq);
                        }
                    }
                });
            }
        }
        function sendlatlang(lat, long, index) {                          
            var arrayItem = [];               
            if (index != undefined) {
                arrayItem.push(index.toString() + "|" + lat + "|" + long);
                array.push(arrayItem);
            }
        }       
    </script>

</form>
</body>
</html>

.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {

        if (!Page.IsPostBack)
        {
            hdnportsequence.Value = "HNL_PPT_MOZ_BOB_WLG_PTZ_SYD";
            hdndata.Value = "HNL|21.4389123:-158.0000565,PPT|-17.576548:-149.609975,MOZ|-17.5388435:-149.8295234,BOB|-16.5004126:-151.7414904,WLG|-41.2864603:174.776236,PTZ|-41.2905926:174.0010044,SYD|-33.8674869:151.2069902";

        }

    }

如何将放置在两个不同世界地图中的标记合并到传单中的一个单一世界地图中？

0 个答案: