我一直在尝试为我的标记添加信息窗口，并尝试了很多我在本网站上找到的选项，但似乎对我没什么用。
我的谷歌地图有自定义图像和过滤器。
我希望有人可以帮我解决这个问题。 我希望所有标记都有其独特的信息窗口。
实时动作:(首先选择右侧的地图） Click here for live map
代码：
<table>
<tr>
<th><div id="map_canvas" style="background: #1B2D33;"> </div> </th>
<th><div id="sizer"><br><br><br>
<h2>Spoiler Alert!</h2>
<br>Markers are disabled by default
<br>Select the map to view map markers.
<br><br>
<form id="sizer" action="#" method="get" accept-charset="utf-8" value="1">
<select id="selector">
<option value="1">Select Map</option>
<option value="1">Khenarthi's Roost</option>
</select>
<br><br>
<fieldset class="option1">
<label class="label_check" for="checkbox-01"><input name="checkbox-01" id="checkbox-01" value="1" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/city.png"title="City"></label>
<label class="label_check" for="checkbox-02"><input name="checkbox-02" id="checkbox-02" value="2" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/wayshrine.png"title="Wayshrine"></label>
<label class="label_check" for="checkbox-03"><input name="checkbox-03" id="checkbox-03" value="3" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/camp.png"title="Camp"></label>
<label class="label_check" for="checkbox-04"><input name="checkbox-04" id="checkbox-04" value="4" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/poi.png"title="Point of Interest"></label>
<label class="label_check" for="checkbox-05"><input name="checkbox-05" id="checkbox-05" value="5" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/farm.png"title="Farm"></label>
<label class="label_check" for="checkbox-06"><input name="checkbox-06" id="checkbox-06" value="6" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/harbor.png"title="Harbor"></label>
<label class="label_check" for="checkbox-07"><input name="checkbox-07" id="checkbox-07" value="7" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/cave.png"title="Cave"></label>
<label class="label_check" for="checkbox-08"><input name="checkbox-08" id="checkbox-08" value="8" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/castleruin.png"title="Castle"></label>
<label class="label_check" for="checkbox-09"><input name="checkbox-09" id="checkbox-09" value="9" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/skyshard.png"title="Skyshard"></label>
</fieldset>
<br> <h2> About the Map</h2>
<br>Welcome to the '' interactive map.
<br>
<br>This map allows you to explore the world of The Elder Scrolls Online interactive.
<br>You can select filters to show or disable points of interest on the world.
</form>
</div>
</th>
</tr>
</table>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.budget-computing.nl/teso_map/load_tiles.js"></script>
<script src="http://www.budget-computing.nl/teso_map/normalizedcoord.js"></script>
<script src="http://www.budget-computing.nl/teso_map/map/khenarthis_roost/center.js"></script>
<script src="http://www.budget-computing.nl/teso_map/markers.js"></script>
<script>
function initialize() {
var mapOptions = {
center: mapcenter,
zoom: 6,
minZoom: 6,
draggable: false,
streetViewControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: ["map"]
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_Left
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_Center
}
};
var iconBase = 'http://www.budget-computing.nl/images/teso/markers/';
//select the sizer here
var sizer=$('#sizer input:checkbox');
// Attach the map to the document
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
// hide the fieldsets on page load
$(".option1").hide();
// Connect the group of checkboxes to the select
$("select").change(function() {
var $this = $(this);
if($this.val() === "1") {
// Link checkbox markers
sizer.change(function(e){
var props=0;
$.each(sizer,function(i,b){
props+=($(b).is(':checked'))?Math.pow(2,i):0;
});
for(var m=0; m < markers1.length; m++){
var positions1 = markers1[m].setMap((props & markers1[m].props ||!props)?map: null);
}
}).eq(0).trigger('change');
// Removing all the markers
for (i=0; i< markers1.length; i++) {
markers1[i].setMap(null)
}
$(".option1").show();
newPos = new google.maps.LatLng(-47,0);
map.setZoom(6);
setTimeout(function() {
markers1=[new google.maps.Marker({
position: positions1[0],
map: map,
icon: iconBase + 'camp.png',
props: 4,
title: 'marker1'
}),new google.maps.Marker({
position: positions1[1],
map: map,
icon: iconBase + 'city.png',
props: 1,
title: 'marker2'
}),new google.maps.Marker({
position: positions1[2],
map: map,
icon: iconBase + 'wayshrine.png',
props: 2,
title: 'marker3'
}),new google.maps.Marker({
position: positions1[3],
map: map,
icon: iconBase + 'wayshrine.png',
props: 2,
title: 'marker4'
}),new google.maps.Marker({
position: positions1[4],
map: map,
icon: iconBase + 'poi.png',
props: 8,
title: 'marker5'
}),new google.maps.Marker({
position: positions1[5],
map: map,
icon: iconBase + 'poi.png',
props: 8,
title: 'marker6'
}),new google.maps.Marker({
position: positions1[6],
map: map,
icon: iconBase + 'poi.png',
props: 8,
title: 'marker7'
}),new google.maps.Marker({
position: positions1[7],
map: map,
icon: iconBase + 'poi.png',
props: 8,
title: 'marker8'
}),new google.maps.Marker({
position: positions1[8],
map: map,
icon: iconBase + 'poi.png',
props: 8,
title: 'marker9'
}),new google.maps.Marker({
position: positions1[9],
map: map,
icon: iconBase + 'cave.png',
props: 64,
title: 'marker10'
}),new google.maps.Marker({
position: positions1[10],
map: map,
icon: iconBase + 'castleruin.png',
props: 128,
title: 'marker11'
}),new google.maps.Marker({
position: positions1[11],
map: map,
icon: iconBase + 'farm.png',
props: 16,
title: 'marker12'
}),new google.maps.Marker({
position: positions1[12],
map: map,
icon: iconBase + 'farm.png',
props: 16,
title: 'marker13'
}),new google.maps.Marker({
position: positions1[13],
map: map,
icon: iconBase + 'farm.png',
props: 16,
title: 'marker14'
}),new google.maps.Marker({
position: positions1[14],
map: map,
icon: iconBase + 'harbor.png',
props: 32,
title: 'marker15'
}),new google.maps.Marker({
position: positions1[15],
map: map,
icon: iconBase + 'harbor.png',
props: 32,
title: 'marker16'
}),new google.maps.Marker({
position: positions1[16],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker17'
}),new google.maps.Marker({
position: positions1[17],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker18'
}),new google.maps.Marker({
position: positions1[18],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker19'
}),new google.maps.Marker({
position: positions1[19],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker20'
}),new google.maps.Marker({
position: positions1[20],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker21'
}),new google.maps.Marker({
position: positions1[21],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker22'
}),new google.maps.Marker({
position: positions1[22],
map: map,
icon: iconBase + 'skyshard.png',
props: 256,
title: 'marker23'
})];
},800)
}
map.panTo(newPos);
});
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('map', mapType);
map.setMapTypeId('map');
map.setZoom(1);
markers1=[],
numProps=8; // The number of the groups
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
答案 0 :(得分：0)
我做的事与你所拥有的非常相似，但仍处于起步阶段（让授权用户提交标记和区域多边形）。
首先，使用您想要的任何选项创建InfoWindow。基本上，您希望将事件监听器附加（单击）到marker1内的每个标记。因此，循环遍历它们并在回调函数内部，您可以引用InfoWindow并告诉它在地图上使用该标记的指定坐标打开。
有些事情：
var iw = new InfoWindow({options:"go here"});
markers1.forEach( function(marker){
google.maps.event.addListener( marker, 'click', function() {
iw.option( map, this );
});
});
我希望这能解决它，祝你好运！