为多个标记添加唯一的信息窗口
Adding unique info window to multiple markers
我一直在尝试将信息窗口添加到我的标记中，并尝试了很多我在这个网站上发现的选项，但似乎没有什么适合我。
我的谷歌地图有一个自定义的图像和过滤器。
我希望有人能帮助我这个编码。我希望所有的标记有其独特的信息窗口。
现场操作:(在右侧先选择一张地图)点击这里查看实时地图
代码:<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>
我正在做一些与您所做的非常非常相似的事情，但仍处于起步阶段(允许授权用户提交标记和区域多边形)。
首先，用你想要的任何选项创建一个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 );
});
});
相关文章：
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上，而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5）使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息
