将自定义信息窗口分配给特定标记

Question

您好，感谢任何人的帮助。我正在制作一个带有 6 个标记和一个自定义信息窗口的谷歌地图。在 infowindow 代码中，我试图将其分配给特定的标记，但似乎无法管理它。

信息窗口仅在我放置标记时可见：newevent，但由于某种原因，当我单击列表中的最后一个标记时，它会显示信息窗口，无论列表有多长（在本例中为 Karlsplatz 标记） .

我已经在我有限的技能库中尝试了所有方法，并将感谢每一个帮助。谢谢

<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>

Answer 1

您只需添加一个带有窗口的标记。你需要改变你创建标记的方式，试试这个方法：

改变这个

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]
 });

到

for (i = 0; i < allevents.length; i++) {
  newevent = new SnazzyInfoWindow({
    marker: 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]
    }),
    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'
})

Answer 2

您应该在创建每个 Marker 时附加一个 infoWindow。

var uluru = {lat: -25.363, lng: 131.044};
var 标记 = 新的 google.maps.Marker({ 职位：乌鲁鲁， 地图：地图， 标题：'乌鲁鲁'}）；

marker.addListener('click', function() {infowindow.open(map, marker); });