Javascript 将自定义信息窗口指定给特定标记
大家好,谢谢大家的帮助。我正在用6个标记和一个自定义信息窗口制作一个谷歌地图。在infowindow代码中,我试图将其分配给特定的标记,但似乎无法管理它 信息窗口只有在我放置marker:newevent时才可见,但出于某种原因,当我单击列表中的最后一个标记时,它会显示信息窗口,无论列表有多长(在本例中为Karlsplatz标记) 我已经尝试了我有限的技能阿森纳的一切,并将感谢每一个帮助。谢谢Javascript 将自定义信息窗口指定给特定标记,javascript,arrays,google-maps,google-maps-markers,infowindow,Javascript,Arrays,Google Maps,Google Maps Markers,Infowindow,大家好,谢谢大家的帮助。我正在用6个标记和一个自定义信息窗口制作一个谷歌地图。在infowindow代码中,我试图将其分配给特定的标记,但似乎无法管理它 信息窗口只有在我放置marker:newevent时才可见,但出于某种原因,当我单击列表中的最后一个标记时,它会显示信息窗口,无论列表有多长(在本例中为Karlsplatz标记) 我已经尝试了我有限的技能阿森纳的一切,并将感谢每一个帮助。谢谢 <script type="text/javascript"> var allevent
<script type="text/javascript">
var allevents = [
['Bitc main', 48.218573, 16.384115, 1,1],
['Schwedenplatz', 48.211472, 16.377494, 1,2],
['Augarten', 48.225593, 16.373820, 2,3],
['Donauinsel', 48.210690, 16.435007, 2,4],
['Sigmund freud park', 48.214706, 16.360314, 3,5],
['Karlsplatz', 48.200439, 16.370548, 3,6]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(48.210033, 16.363449),
styles: mapStyle });
var markers = [];
var i, newevent;
for (i = 0; i < allevents.length; i++) {
newevent = new google.maps.Marker({
position: new google.maps.LatLng(allevents[i][1], allevents[i][2]),
map: map,
icon: 'https://cdn2.iconfinder.com/data/icons/social-hand-drawn-icons/64/social_8-48.png',
title: allevents[i][0]
});
newevent.category = allevents[i][3];
markers.push(newevent);
}
function displayMarkers(category) {
var i;
for (i = 0; i < markers.length; i++) {
if (markers[i].category === category) {
markers[i].setVisible(true);
}
else {
markers[i].setVisible(false);
}
}
}
// Add a Snazzy Info Window to the marker
var info = new SnazzyInfoWindow({
marker: newevent,
placement: 'right',
offset: {
left: '20px'
},
content: '<a href="https://www.google.at/search?q=vegan+market&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjGlIad_NrYAhXOb1AKHYYfCRIQ_AUICigB&biw=1280&bih=615#imgrc=OfLGBDeuz3EGKM" style="color:inherit;text-decoration:none;">'+
'<div><h2 style="position:absolute;top:150px;left:10px;">Vegan Market</h2><img src="vegan.jpg" style="width:350px;height:200px;"/></div>' +
'<p style="width:330px;padding-left:10px;"><strong>Date & Time: </strong>Sunday, April 22 at 9 AM - 3 PM</p>'+
'<p style="width:330px;padding-left:10px;"><strong>Location: </strong>Vienna, Austria</p>' +
'<p style="width:330px;padding:10px;">For others reading these comments: this has nothing to do with "pride" or being "cool". Using tables for layout is pragmatically even more painful especially for large amounts of content.</p>' +
'<div style="text-align:center;padding:10px;"><strong>Click On Event To See More!</strong></div>'+
'</a>',
showCloseButton: true,
closeOnMapClick: true,
padding: '0px',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
border: false,
borderRadius: '0px',
shadow: true,
fontColor: '#fff',
fontSize: '15px'
});
</script>
变量allevents=[
[Bitc main',48.218573,16.384115,1,1],
[Schwedenplatz',48.211472,16.377494,1,2],
[Augarten',48.225593,16.373820,2,3],
[Donauinsel',48.210690,16.435007,2,4],
[Sigmund freud park',48.214706,16.360314,3,5],
[Karlsplatz',48.200439,16.370548,3,6]
];
var map=new google.maps.map(document.getElementById('map'){
缩放:12,
中心:新google.maps.LatLng(48.210033,16.363449),
样式:mapStyle});
var标记=[];
var i,新事件;
对于(i=0;i
您只能在窗口中添加一个标记。您需要更改创建标记的方式,请尝试以下方法:
改变这个
for(i=0;i })
在创建每个标记时,应该附加一个信息窗口
var uluru={lat:-25.363,液化天然气:131.044};var marker=new google.maps.marker({ 职位:乌卢鲁, 地图:地图, 标题:“Uluru”}) marker.addListener('click',function(){infowindow.open(map,marker));
});我在发布的代码中得到javascript错误:
uncaughtreferenceerror:mapStyle未定义
,当我对此进行注释时,我得到:uncaughtreferenceerror:snazzyInfo窗口未定义
。请提供一个示例,说明您试图解决的问题。