将OverlappingMarkerSpidifier与我们的代码集成 [英] Integrating OverlappingMarkerSpidifier with our code

问题描述

我和我的团队正在组织一个项目，在德克萨斯州的科利奇站周围发生事故。大多数标记位于一个坐标处，因此我们试图将 OverlappingMarkerSpidifier code> 代码与我们的代码，但我不太清楚如何去做。任何人都可以提供帮助吗？

这些代码大部分都可以工作，或者至少可以将标记填充到需要的位置，我可以获取infowindow以便为最上面的标记。主要的问题是想办法改变这个（从上面的网站）：

  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> <风格> #mapcanvas {height：300px; margin：0px;填充：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> <脚本> //在大学站var map上加载和中心地图;函数initialize（）{var mapOptions = {zoom：12，center：new google.maps.LatLng（30.628769，-96.334816）}; map = new google.maps.Map（document.getElementById（'mapcanvas'），mapOptions）; //创建信息窗口var infowindow = new google.maps.InfoWindow（{content：''}）; //获取并解析JSON数据$（document）.ready（function（）{$（button）。click（function（）{$ .each（data.items，handleItem）;}）;}）;函数handleItem（i，items）{$（'＃placeholder'）。append（< li> Coord：+ items.lat + items.long +Category：+ items.category +< / li> ）; //信息窗口内容var contentString ='< div id = content>'+'事件通知'+'< / div>'+'< p id =firstHeadingclass =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。标记（{position：myLatLng，map：map，icon：img}）; //单击时创建信息窗口并单击新标记时关闭var oms = new OverlappingMarkerSpiderfier（map）; oms.addListener（'clic k'，函数（标记，事件）{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（标记）; }} google.maps.event.addDomListener（window，'load'，initialize）; < /脚本> < /头> <身体GT; < div id =mapcanvas>< / div> <按钮>获取并解析< /按钮> < p为H. < / p为H. < ul id =placeholder> < / UL> < / body>< / html>  

解决方案

你的代码有很多问题：

• declare oms 作为全局变量，只有一个实例，这将便于使用;
  
• iconWithColor 未定义;
$未在 spiderfy 侦听器上定义b $ b
• shadow ;


• ，您正在调用 iw.close（）; 。 iw 未定义，并且不是添加在点击侦听器中。将函数主体更改为 infoWindow.close（）; ;

例如，可能可以帮助你：

< html> < HEAD> <风格> #mapcanvas {height：300px; margin：0px;填充：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> <脚本> var map;变种; //创建信息窗口（只需要一个）var infowindow = new google.maps.InfoWindow（）;函数initialize（）{var mapOptions = {zoom：12，center：new google.maps.LatLng（30.628769，-96.334816）}; //在大学地图上加载和中心地图map = new google.maps.Map（document.getElementById（'mapcanvas'），mapOptions）; oms =新的OverlappingMarkerSpiderfier（地图）; //听众需要注册一次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）;}}）;函数handleItem（items）{$（'＃placeholder'）。append（< li> Coord：+ items.lat + items.long +Category：+ items.category +< / li>） ; //信息窗口内容var contentString ='< div id = content>'+'事件通知'+'< / div>'+'< p id =firstHeadingclass =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。标记（{position：myLatLng，map：map，icon：img}）; //可以在click中显示特定内容marker.description = contentString; oms.addMarker（marker）;} //获取并解析JSON数据$（document）.ready（function（）{$（button）。click（function（）{$ .each（data.items，handleItem）; }）; }）; var item = {lat：30.628769，long：-96.334816，category：Category - }; //仅用于测试（var i = 5; i> = 0; i--）{item.category + = i; handleItem（项目）; }} google.maps.event.addDomListener（window，'load'，initialize）; < /脚本> < /头> <身体GT; < div id =mapcanvas>< / div> <按钮>获取并解析< /按钮> < p为H.;< / p为H. < ul id =placeholder> < / UL> < / body>< / html>

My team and I are working on a group project that plots incidents around College Station, TX. Most of the markers are located at one coordinate, so we're trying to integrate the OverlappingMarkerSpidifier code with ours, but I'm not quite sure how to do it. Could anyone help with this?

The code works for the most part, or at least the markers populate where they need to and I can get an infowindow to pop up for the topmost marker. The main issue is figuring out to transform this (from the above website):

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
}

into something that will loop through our data instead.

Note: The original code had JSON values within it, but those have been removed for this post. Additionally, since this will probably make a difference, we hard coded our JSON data (I know, it's terrible practice, but we needed to do it at the time to start working with the map code itself)

<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>

解决方案

There are many problems with your code:

• declare oms as global variable, only one instance, this will facilitate the use;
• iconWithColor is not defined;
• shadow is not defined;
• on spiderfy listener, you are calling iw.close();. iw is not defined and is not the added in click listener. Change body of function to infoWindow.close();;

Se an example, may can help you:

<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>

这篇关于将OverlappingMarkerSpidifier与我们的代码集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！