Question

我对jQuery相对较新，并且通常使用API。我正在努力使oms重叠Marker Spiderifier与Google Maps v3一起使用。我用它来解决在完全相同的位置有多个指针的问题。

现有代码创建一个地图实例并为其添加标记。一切似乎工作正常，没有错误，但标记只是不会蜘蛛化。我不知道为什么。任何指出我做错的帮助都会非常感激。

此外，此代码的历史可以追溯到2013年。是否有更好，更友好的方式来解决上述问题？

这是我的jsfiddle：https://jsfiddle.net/LaurenceLee/7p3mn92m/

(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function new_map( $el ) {

// find markers
var $markers = $('.marker');

// vars
var args = {
    zoom        : 4,
    center      : new google.maps.LatLng(37.096, -113.568),
    scrollwheel : false,
    mapTypeId   : google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
    streetViewControl: true
};

// create map               
var map = new google.maps.Map( $el[0], args);

// init Overlapping Marker Spiderfier and global listener (oms)
    var oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true, markersWontHide: true, keepSpiderfied: true, nearbyDistance: 10, legWeight: 5});
var iw = new google.maps.InfoWindow();
oms.addListener('click', function(marker, event) {
  iw.setContent(marker.desc);
  iw.setLatLng(marker.getLatLng());
  iw.open(map, marker);
});
oms.addListener('spiderfy', function(marker, event) {
  iw.close(map, marker);
});

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){
    add_marker( $(this), map );
    // push to oms
    oms.addMarker( $(this) );
});

// center map
center_map(map);
// return
return map;

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type        function
*  @date        8/11/2013
*  @since       4.3.0
*
*  @param       $marker (jQuery element)
*  @param       map (Google Map object)
*  @return      n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var icon = $marker.attr('data-icon');

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map,
    icon        : icon
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
    // create info window
    var infowindow = new google.maps.InfoWindow({
        content     : $marker.html(),
    });
    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open( map, marker );
    });
}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map(map) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
    bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
}
// no markers?
else if( map.markers.length == 0 )
{
    // set center of map
    map.setCenter( 37.096, -113.568 ); 
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/

// global var
var map = null;
$(document).ready(function(){

    $('#map_container').each(function(){
        //render_map( $(this) );
        map = new_map( $(this) );
    });

});

})(jQuery);

Answer 1

Overlapping Marker Spiderfier不知道如何处理$（this）（这是一个JQuery的事情）。您需要将google.maps.Marker对象传递给它。

一种选择是从add_marker函数返回标记。

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var icon = $marker.attr('data-icon');

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        icon        : icon
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html(),
        });
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
    return marker;
}

然后将该值传递给蜘蛛侠：

// add markers
$markers.each(function(){

    // push to oms
    oms.addMarker(add_marker( $(this), map ));
});

proof of concept fiddle

代码段

(function($) {

  /*
   *  render_map
   *
   *  This function will render a Google Map onto the selected jQuery element
   *
   *  @type    function
   *  @date    8/11/2013
   *  @since   4.3.0
   *
   *  @param   $el (jQuery element)
   *  @return  n/a
   */

  function new_map($el) {

    // find markers
    var $markers = $('.marker');

    // vars
    var args = {
      zoom: 4,
      center: new google.maps.LatLng(37.096, -113.568),
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    };

    // create map               
    var map = new google.maps.Map($el[0], args);

    // init Overlapping Marker Spiderfier and global listener (oms)
    var oms = new OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      markersWontHide: true,
      keepSpiderfied: true,
      nearbyDistance: 10,
      legWeight: 5
    });
    var iw = new google.maps.InfoWindow();
    oms.addListener('click', function(marker, event) {
      iw.setContent(marker.desc);
      iw.setLatLng(marker.getLatLng());
      iw.open(map, marker);
    });
    oms.addListener('spiderfy', function(marker, event) {
      iw.close(map, marker);
    });

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function() {

      // push to oms
      oms.addMarker(add_marker($(this), map));
    });

    // center map
    center_map(map);
    // return
    return map;

  }

  /*
   *  add_marker
   *
   *  This function will add a marker to the selected Google Map
   *
   *  @type        function
   *  @date        8/11/2013
   *  @since       4.3.0
   *
   *  @param       $marker (jQuery element)
   *  @param       map (Google Map object)
   *  @return      n/a
   */

  function add_marker($marker, map) {

    // var
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
    var icon = $marker.attr('data-icon');

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: icon
    });

    // add to array
    map.markers.push(marker);

    // if marker contains HTML, add it to an infoWindow
    if ($marker.html()) {
      // create info window
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html(),
      });
      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    }
    return marker;
  }

  /*
   *  center_map
   *
   *  This function will center the map, showing all markers attached to this map
   *
   *  @type    function
   *  @date    8/11/2013
   *  @since   4.3.0
   *
   *  @param   map (Google Map object)
   *  @return  n/a
   */

  function center_map(map) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each(map.markers, function(i, marker) {
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
      bounds.extend(latlng);
    });
    // only 1 marker?
    if (map.markers.length == 1) {
      // set center of map
      map.setCenter(bounds.getCenter());
    }
    // no markers?
    else if (map.markers.length == 0) {
      // set center of map
      map.setCenter(37.096, -113.568);
    } else {
      // fit to bounds
      map.fitBounds(bounds);
    }

  }

  /*
   *  document ready
   *
   *  This function will render each map when the document is ready (page has loaded)
   *
   *  @type    function
   *  @date    8/11/2013
   *  @since   5.0.0
   *
   *  @param   n/a
   *  @return  n/a
   */

  // global var
  var map = null;
  $(document).ready(function() {

    $('#map_container').each(function() {
      //render_map( $(this) );
      map = new_map($(this));
    });

  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://eventida.com/assets/plugins/oms.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="map_container" class="gmap" style="height:250px; margin-bottom: 30px;">
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
  Location One
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
  Location Two
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
  Location Three
</div>

谷歌地图+重叠标记蜘蛛

1 个答案: