Question

我和我的团队正在开展一个小组项目，该项目描绘了德克萨斯州大学城周围的事件。大多数标记位于一个坐标，因此我们尝试将OverlappingMarkerSpidifier代码与我们的代码集成，但我不太清楚如何做到这一点。任何人都可以帮忙吗？

代码在很大程度上起作用，或者至少标记填充在他们需要的位置，并且我可以获得一个信息窗口以弹出最顶层的标记。主要问题是要解决这个问题（来自上述网站）：

for (var i = 0; i < window.mapData.length; i ++) {
  var datum = window.mapData[i];
  var loc = new L.LatLng(datum.lat, datum.lon);
  var marker = new L.Marker(loc);
  marker.desc = datum.d;
  map.addLayer(marker);
  oms.addMarker(marker);  // <-- here
}

代替将循环我们的数据。

注意：原始代码中包含JSON值，但此帖子已删除。另外，由于这可能会有所不同，我们对JSON数据进行了硬编码（我知道，这是一种糟糕的做法，但我们当时需要这样做才能开始使用地图代码本身）

<html>
    <head>
        <style>
            #mapcanvas {
                height: 300px;
                margin: 0px;
                padding: 300px;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
        <script>
            //Load and center map on college station
            var map;
             
            function initialize() {

                var mapOptions = {
                    zoom: 12,
                    center: new google.maps.LatLng(30.628769, -96.334816)
                };
             
                map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
                
                //Create info window   	 
                var infowindow = new google.maps.InfoWindow({
                    content: ''
                });    
             
                //Get and parse JSON data  	 
                $(document).ready(function(){
                    $("button").click(function(){
                        $.each(data.items, handleItem);
                    });
                });
             
                function handleItem(i, items) {
                    $('#placeholder').append("<li>Coord: " + items.lat + items.long + "Category:" + items.category + "</li>");
         
                    //Info window content 
                    var contentString = '<div id=content">'+
                    'Incident Notice'+
                    '</div>'+
                    '<p id = "firstHeading" class="firstHeading">' + items.category + '<br></br>' + items.lat + ", " + items.long + '</p>' +
                    '</div>'
                    'Location: Texas A&M'

                    var img = 'http://www.google.com/mapfiles/marker.png';
                    var myLatLng = new google.maps.LatLng(items.lat, items.long);
                    var marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        icon: img
                    });

                    //Create info window on click and close when clicking a new marker
                    var oms = new OverlappingMarkerSpiderfier(map);
                    
                    oms.addListener('click', function(marker, event) {
                        infowindow.setContent(contentString);
                        infowindow.open(map, marker);
                    });
                    
                    oms.addListener('spiderfy', function(markers) {
                        for(var i = 0; i < markers.length; i ++) {
                            markers[i].setIcon(iconWithColor(spiderfiedColor));
                            markers[i].setShadow(null);
                        } 
                        iw.close();
                    });

                    oms.addListener('unspiderfy', function(markers) {
                        for(var i = 0; i < markers.length; i ++) {
                            markers[i].setIcon(iconWithColor(usualColor));
                            markers[i].setShadow(shadow);
                        }
                    });

                    oms.addMarker(marker);
                }
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="mapcanvas"></div>
        <button>Get and Parse</button>
        <p>
         
        </p>
        <ul id="placeholder">
        </ul>
    </body>
</html>

Answer 1

您的代码存在许多问题：

将oms声明为全局变量，只有一个实例，这样可以方便使用;
iconWithColor未定义;
shadow未定义;
在 spiderfy 侦听器上，您正在调用iw.close();。 iw未定义，并且不是click侦听器中添加的infoWindow.close();。将函数体更改为<html> <head> <style> #mapcanvas { height: 300px; margin: 0px; padding: 300px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script> <script> var map; var oms; //Create info window (need only one) var infowindow = new google.maps.InfoWindow(); function initialize() { var mapOptions = { zoom: 12, center: new google.maps.LatLng(30.628769, -96.334816) }; //Load and center map on college station map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions); oms = new OverlappingMarkerSpiderfier(map); // listeners need to be registered only once oms.addListener('click', function(marker, event) { infowindow.setContent(marker.description); infowindow.open(map, marker); }); oms.addListener('spiderfy', function(markers) { for(var i = 0; i < markers.length; i++) { // markers[i].setIcon(iconWithColor(spiderfiedColor)); markers[i].setShadow(null); } infowindow.close(); }); oms.addListener('unspiderfy', function(markers) { for(var i = 0; i < markers.length; i++) { // markers[i].setIcon(iconWithColor(usualColor)); // markers[i].setShadow(shadow); } }); function handleItem(items) { $('#placeholder').append("<li>Coord: " + items.lat + items.long + " Category: " + items.category + "</li>"); //Info window content var contentString = '<div id=content">'+ 'Incident Notice'+ '</div>'+ '<p id = "firstHeading" class="firstHeading">' + items.category + '<br></br>' + items.lat + ", " + items.long + '</p>' + '</div>' 'Location: Texas A&M' var img = 'http://www.google.com/mapfiles/marker.png'; var myLatLng = new google.maps.LatLng(items.lat, items.long); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: img }); // to be possible in "click" show specific content marker.description = contentString; oms.addMarker(marker); } //Get and parse JSON data $(document).ready(function(){ $("button").click(function(){ $.each(data.items, handleItem); }); }); var item = { lat: 30.628769, long: -96.334816, category: "Category - " }; // for test only for(var i = 5; i >= 0; i--) { item.category += i; handleItem(item); } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="mapcanvas"></div> <button>Get and Parse</button> <p></p> <ul id="placeholder"> </ul> </body> </html>;

举个例子，可以帮到你：

div.container { width: 970px !important; }

将OverlappingMarkerSpidifier与我们的代码集成

1 个答案: