如何保持群集上显示的特定标记的信息窗口?

时间:2014-09-19 09:59:15

标签: javascript ruby-on-rails-3 google-maps google-maps-api-3 infowindow

我在Ruby on Rails应用程序中使用 Google Maps Javascript v3 API MarkerClusterer JS

我想在地图中使用以下功能。我在地图上有一些标记,当我缩小地图时地图标记形成一个簇,当我放大时再次分离。当我点击特定标记时,它会显示该标记的信息窗口,并且当我点击群集时,它会显示与该群集相关的信息窗口。这是我的地图的当前行为。

现在,当我点击地图上的特定标记时,它会显示该标记的信息窗口,现在我将其缩小,当标记成为群集的一部分时,该标记的信息窗口将被隐藏,我希望该信息窗口仍然显示在群集上。

我正在使用标记和群集的全局信息窗口。 这是在我的应用程序中处理map的一些代码。

function createMarker(latlng, name, html) {
  // create new google marker using the latitude and longitude that is passed into this function as "latlng"
    var marker = new google.maps.Marker({
      position: latlng,
      draggable: true ,
      map: map,
      zIndex: Math.round(latlng.lat()*-100000)<<5,
      icon: '/assets/pin.png',
    });

    // add click event listner to the created marker
    google.maps.event.addListener(marker, 'click', function() {
      // clear the previous content of infowindow
      infowindow.setContent('');;
      // close the infowindow
      infowindow.close();
      // set the content of infowindow that is passed into this function as "html"
      infowindow.setContent(html);
      // open the new infowindow with the created marker
      infowindow.open(map,marker);
      clearUpMenus();

    });

    // add closeclick event listner when user clicks on the close button on the infowindow
    google.maps.event.addListener(infowindow,'closeclick',function(){
    // set the map of the marker to null
      marker.setMap(null);
      check = null;
    });

    // add drag event listner when user drags the created marker
    google.maps.event.addListener(marker,'dragend',function(event) {
      // update latitude and longitude of the marker with the dragged ones.
      var lat = event.latLng.lat();
      var lng = event.latLng.lng();
      // set latitude and longitude to the input fields for further uses.
        form_latitude = lat;
        form_longitude = lng;
      $("input[id=location_latitude]").val(lat);
      $("input[id=location_longitude]").val(lng);
    });

    // trigger the click event manually
    google.maps.event.trigger(marker, 'click');
       // return the created marker
      return marker;
  }

以上是在我的地图上创建新标记的代码。

var markerCluster = new MarkerClusterer(map,markersArray, clusterOptions);
      google.maps.event.addListener(markerCluster, 'click', function(cluster) {
             // this function displays the info-window on cluster
             displayClusterInfo(cluster);
      });

function displayClusterInfo(cluster) {
    var markers = cluster.getMarkers();
    $('.map-title').css('z-index',-1);
    map.setOptions({zoomControl:false, streetViewControl:false});
    var info = new google.maps.MVCObject;
    info.set('position', cluster.getCenter());
    //getTopThreeMarkers() - It makes the ajax call to get top markers based on some criteria 
    getTopThreeMarkers(info,markers);
}

任何帮助将不胜感激。 谢谢。

0 个答案:

没有答案