任何人都有一个想法,如何使CodeIgniter Google Maps API v3库只允许打开一个信息窗口,还可以在单击外部时隐藏信息窗口信息窗口。CodeIgniter + Google Maps API V3 +关闭InfoWindow()
库: http://www.in-the-attic.co.uk/2010/08/03/google-map-library-for-codeigniter-example-usage-update/
任何人都有一个想法,如何使CodeIgniter Google Maps API v3库只允许打开一个信息窗口,还可以在单击外部时隐藏信息窗口信息窗口。CodeIgniter + Google Maps API V3 +关闭InfoWindow()
库: http://www.in-the-attic.co.uk/2010/08/03/google-map-library-for-codeigniter-example-usage-update/
如果你只需要一个信息窗口同时显示(因为这是谷歌地图的行为),你应该只创建一个实例信息窗口。
希望它可以帮助
我结束了使用所谓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);
感谢,它确实帮助。我结束了第三方插件叫做infoBubbles。 – gorelative