我现在测试了大约1个小时。但由于某种原因,我无法使其工作,为每个标记显示另一个infowindow文本。 点击它们中的每一个,都会打开一个新的信息窗口(旧信息将关闭,这是好的),但窗口内的文字始终是我在最后一个标记中设置的文字:
function initialize() {
var center = new google.maps.LatLng(51.133333,10.416667);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.photos[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
title: dataPhoto.infotitle,
map: map,
});
/* Create Info Windows */
var infowindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<h3>'+marker.title+'</h3>'+' Infotext');
infowindow.open(map, this);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
我一直在这里看到一些解决方案,但它们似乎都不适合我。 我非常感谢你的帮助!
请参阅online demo。
答案 0 :(得分:3)
您只需将内容设置为this.title,而不是marker.title
infowindow.setContent('<h3>'+this.title+'</h3>'+' Infotext');
由于 dz46
答案 1 :(得分:0)
你没有任何方法来存储infoWindow ..看看我的代码,我使用infoBubble库,但它应该非常相似。这可能是你需要的代码,但更多的是更好的..
/**
* infoBubble Variable
* This variable is globally defined for defaults that are loaded.
*/
var infoBubbles = [];
/**
* 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){
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
});
/** push the marker to the markersArray to delete or show the overlays */
markersArray.push(marker);
var sidebarItem = point[i].sidebarHtmlView;
sidebarHtmlArray.push(sidebarItem);
infoBubbles[i] = new InfoBubble({
map: map,
minHeight: point[i].min_height,
maxHeight: point[i].max_height,
minWidth: point[i].min_width,
maxWidth: point[i].max_width,
disableAutoPan: false,
hideCloseButton: false,
arrowPosition: 30,
padding:12
});
var tabs = point[i].tabs;
infoBubbles[i].addTab('Company', point[i].html);
for (var ii = 0; ii < tabs.length; ii++) {
infoBubbles[i].addTab(tabs[ii].tabTitle, tabs[ii].tabContent);
}
/**
* 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', handleMarkerClick(marker, i));
}
}
function handleMarkerClick(marker,index) {
return function() {
if (!infoBubbles[index].isOpen()) {
infoBubbles[index].open(map, marker);
}else{
infoBubbles[index].close(map, marker);
}
}
}
/**
* 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);
}
答案 2 :(得分:0)
将您的代码更改为
var markers = new Array();
var infowindow = new Array();
var map;
function initialize() {
var center = new google.maps.LatLng(51.133333,10.416667);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0, dataPhoto; dataPhoto = data.photos[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
markers[i] = new google.maps.Marker({
position: latLng,
title: dataPhoto.infotitle,
map: map,
});
/* Create Info Windows */
infowindow[i] = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(markers[i], 'click', function() {
infowindow[i].setContent('<h3>'+this.title+'</h3>'+' Infotext');
infowindow[i].open(map, this);
});
}
var markerCluster = new MarkerClusterer(map, markers);
}