2011-11-26 104 views

回答

0

如果你只需要一个信息窗口同时显示(因为这是谷歌地图的行为),你应该只创建一个实例信息窗口。

希望它可以帮助

+0

感谢,它确实帮助。我结束了第三方插件叫做infoBubbles。 – gorelative

0

我结束了使用所谓infoBubbles.js第三方插件生成一些自定义的信息窗口。我不是为每个标记生成一个infoBubble,而是创建一个变量,并通过google.maps.marker();传递infoBubbles内容。然后我将这些标记存储在一个数组中,点击后它会穿过数组并显示气泡。

下面是完整的代码:

/** 
* infoBubble Variable 
* This variable is globally defined for defaults that are loaded. 
*/ 
var infoBubble = null; 
/** 
* array of all of the markers that are on the map 
* 
* @type {Array} 
* @author Mike DeVita 
* @copyright 2011 MapIT USA 
* @category map_Js 
*/ 
var markersArray = []; 
/** 
* array of all of the sidebar items for all of the markers on the map 
* 
* @type {Array} 
* @author Mike DeVita 
* @copyright 2011 MapIT USA 
* @category map_Js 
*/ 
var sidebarHtmlArray = []; 

/** 
* setPoints(locations) 
* 
* sets the marker, infoBubble and sidebarItem based on the locations 
* that were returned from the JSON query. 
* 
* @param {array} locations array of all of the points, and their settings/html 
* 
* @author Mike DeVita 
* @author Google Maps API 
* @copyright 2011 MapIT USA 
* @category map_js 
*/  
function setPoints(locations){ 
    infoBubble = new InfoBubble({ 
     map: map, 
     content: 'placeholder', 
     disableAutoPan: false, 
     hideCloseButton: false, 
     arrowPosition: 30, 
     arrowStyle: 0 
    }); 

    for (var i = 0; i < locations.length; i++) { 
     /** @type {array} reassigns locations array to be point, isolates it to the setPoints() function */ 
     var point = locations; 
     /** @type {google} generates Googles API form of the lat lng passed from var point */ 
     var myLatLng = new google.maps.LatLng(point[i].lat, point[i].lng); 

     /** 
     * marker variable, stores all of the information pertaining to a specific marker 
     * this variable creates the marker, places it on the map and then also sets some 
     * custom options for the infoBubbles. 
     * 
     * @type {google} 
     */ 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      animation: google.maps.Animation.DROP, 
      icon: point[i].marker_icon, 
      infoBubble_html: point[i].html, 
      infoBubble_minWidth: point[i].min_width, 
      infoBubble_maxWidth: point[i].max_width, 
      infoBubble_minHeight: point[i].min_height, 
      infoBubble_maxHeight: point[i].max_height 
     }); 

     /** push the marker to the markersArray to delete or show the overlays */ 
     markersArray.push(marker); 

     var sidebarItem = point[i].sidebarHtmlView; 
     sidebarHtmlArray.push(sidebarItem); 


     /** 
     * add the listeners for the markerClicks and the sideBarClicks 
     * 
     * @type {google} 
     * @todo eventDomListener does not work yet, this is the click listener of the sidebar item's 
     */ 
     google.maps.event.addListener(marker, 'click', function(){ 
      infoBubble.setContent(this.infoBubble_html); 
      infoBubble.setMinWidth(this.infoBubble_minWidth); 
      infoBubble.setMaxWidth(this.infoBubble_maxWidth); 
      infoBubble.setMinHeight(this.infoBubble_minHeight); 
      infoBubble.setMaxHeight(this.infoBubble_maxHeight); 
      infoBubble.open(map, this); 
     }); 
    } 
} 

/** 
* addmarker(location) 
* 
* adds the marker to the map and pushes the marker 
* to the end of the markersArray 
* 
* @param {google} location LatLng of where the marker should be put 
* 
* @author Mike DeVita 
* @author Google API 
* @copyright 2011 MapIT USA 
* @category map_js 
*/ 
function addMarker(location, marker_icon){ 
    marker = new google.maps.Marker({ 
     position: location, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     icon: marker_icon 
    }); 
    markersArray.push(marker); 
} 

function addSidebarItem(sidebarItem, i){ 
    $(document).ready(function(){ 
     $('#map_items').append('<div id="point_'+i+'">'+sidebarItem+'</div>'); 
    }); 

} 

/** 
* showOverlays() 
* 
* display the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray 
* 
* @author Mike DeVita 
* @author Google API 
* @copyright 2011 MapIT USA 
* @category map_js 
* 
* @todo add display of infoBUbbles 
*/ 
function showOverlays() { 
    /** show the markers */ 
    if (markersArray) { 
     for (i in markersArray) { 
      markersArray[i].setMap(map); 
     } 
    } 
    /** show the side bar items*/ 
    if (sidebarHtmlArray) { 
     for (i in sidebarHtmlArray) { 
      var sidebarItem = sidebarHtmlArray[i]; 
      addSidebarItem(sidebarItem, i); 
     } 
    } 
} 

/** 
* deleteOverlays() 
* 
* delete all of the Overlays that are in markersArray, infoBubbles, sidebarHtmlArray 
* 
* @author Mike DeVita 
* @author Google API 
* @copyright 2011 MapIT USA 
* @category map_js 
*/ 
function deleteOverlays() { 
    /** if markersArray is set, remove the marker off the map, and set it to lenght 0 */ 
    if (markersArray) { 
     for (i in markersArray) { 
      markersArray[i].setMap(null); 
     } 
     markersArray.length = 0; 
    } 
    /** if sidebarHtmlArray is set, set it to length 0 */ 
    if (sidebarHtmlArray){ 
     sidebarHtmlArray.length = 0; 
     $('#map_items div').empty(); 
    } 
} 

/** 
* showLoading() 
* 
* shows the loading animation for the sidebar and map points 
* this helps to notify the user that the content they are trying 
* to load is indeed loading. 
* 
* @author Jonathan Sampson 
*/ 
function showLoading() { 
    $("#loading").show(); 
    $("#sidebar-loading").show(); 
} 

/** 
* hideLoading() 
* 
* hides the loading animation for the sidebar and map points 
* this helps to notify the user that the content they are trying to load 
* has been loaded. 
* 
* @author Jonathan Sampson 
*/ 
function hideLoading() { 
    $("#loading").hide(); 
    $("#sidebar-loading").hide(); 
} 

/** 
* JSON/AJAX Submit for Categories 
* 
* On submit of #submit JSON query site/process controller 
* returns json encoded arrays of points and their lat/lng, html and sidebarHtml 
* 
* @return {json_array} 
* 
* @author Mike DeVita 
* @author Google API 
* @copyright 2011 MapIT USA 
* @category map_js 
*/ 
$(document).ready(function(){ 

    $('#submit').click(function(){ 
     var items = $('#categoryList').serialize(); 
     $('#map_sidebar_controls_container').animate({width:0}); 
     $('#map_sidebar_button').animate({left:0}); 
     deleteOverlays(); 
     showLoading(); 
     setTimeout(function(){ 
      $.post("index/process.html", { "items": items }, 
      function(data){ 
       var points = data; 
       setPoints(points); 
       showOverlays(); 
       hideLoading(); 
      }, "json"); 
     }, 275); 
    }); //END SUBMIT CLICK FOR AJAX 

    $('#reset').click(function(){ 
     $('#categoryList').find('input[type=checkbox]:checked').removeAttr('checked'); 
     deleteOverlays(); 
    }); //END RESET CLICK FOR RESETTING POINTS AND CATEGORIES 
}); 

/** load the init() function onLoad of the DOM Window */ 
google.maps.event.addDomListener(window, 'load', init); 
相关问题