任何人都知道如何让CodeIgniter Google Maps API v3库只允许打开一个信息窗口，并且还可以在信息窗口外单击时隐藏信息窗口。
库： http://www.in-the-attic.co.uk/2010/08/03/google-map-library-for-codeigniter-example-usage-update/
答案 0 :(得分：0)
如果您希望一次只显示一个信息窗口（因为这是Google地图的行为），您应该只创建一个实例信息窗口。
希望有所帮助
答案 1 :(得分：0)
我最终使用名为infoBubbles.js的第三方插件来生成一些自定义的infoWindows。我创建一个变量，而不是为每个标记生成一个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);