将 OverlappingMarkerSpidifier 与我们的代码集成答案

【问题标题】：Integrating OverlappingMarkerSpidifier with our code将 OverlappingMarkerSpidifier 与我们的代码集成
【发布时间】：2015-04-24 01:33:20
【问题描述】：

我和我的团队正在开展一个小组项目，该项目在德克萨斯州大学城附近策划事件。大多数标记都位于一个坐标上，因此我们正在尝试将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>

【问题讨论】：

你有没有尝试过？
是的，我尝试在页面底部的基本代码中添加他所说的内容。但是由于他在他的代码中使用了诸如“gm”之类的变量，并且基本地图构造有所不同，所以我不完全确定如何在不完全改变我们已有的内容的情况下合并他的代码。我们刚开始学习 WebGIS 课程，所以我们对这方面的工作和一般的编码都有点陌生。
handleItem 函数在 initialize 函数内部。对吗？
根据我们在本学期早些时候做的一个实验，这是可行的。到目前为止，我们还没有遇到任何问题。
看我的回答，或许能帮到你。

标签： google-maps google-maps-api-3

【解决方案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>

【讨论】：

@MonicaParshley 不客气。请考虑接受答案；）