Javascript 中的多个标记信息窗口答案

【问题标题】：Multiple Marker InfoWindows in JavascriptJavascript 中的多个标记信息窗口
【发布时间】：2012-06-22 16:22:41
【问题描述】：

在 Javascript 方面我是个菜鸟，但我正在为我的网站/学校项目尝试一些东西。

我想在地图上显示 2 个位置，每个位置都有一个标记和一个信息窗口。 1 显示我的位置 + 联系方式，第二个标记应显示公司的其他详细信息。

我已经设法在地图中获得 2 个标记以显示在我想要的位置，但下一个问题是为每个标记提供它自己的 InfoWindow。

var Rafael = new google.maps.LatLng(52.341949,6.682236); var Aandagt = new google.maps.LatLng(52.341949,6.782236);

var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(52.341949,6.682236),
    streetViewControl: false,
    zoomControl: false,
    panControl: false,
    scaleControl: false,
    overviewMapControl: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
    position: Rafael,
    map: map,
    title:"Rafael"
}); 

var marker = new google.maps.Marker({
    position: Aandagt,
    map: map,
    title:"Aandagt"
}); 

var infowindow = new google.maps.InfoWindow({
    content: '<h9><a href="http://www.aandagt.nl">AANDAGT Reclame & Marketing</a></h9><h10><br /><br />Einsteinstraat 8b<br />7601 PR Almelo<br /><br />Telefoon (0546) 85 03 69<br />Fax (0546) 45 53 31<br /><br /><a href="mailto:info@aandagt.nl">info@aandagt.nl</a></h10>'
})


google.maps.event.addListener(marker, 'mouseover', function() {
  infowindow.open(map,marker);
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.close(map,marker);
});

任何关于如何添加和附加 2 个 InfoWindows、1 个用于标记“Rafael”和 1 个用于标记“Aandagt”的帮助或建议将不胜感激。

查看我当前的地图：http://www.imrafaelhi.nl/stageverslag/?page_id=266

【问题讨论】：

标签： javascript google-maps google-maps-markers infowindow

【解决方案1】：

您已经创建了 2 个具有不同位置值的标记和一个名为 Rafael 的标记的鼠标悬停侦听器。

我建议你将标记声明为：marker1 和 marker2。

然后为与每个标记关联的每个信息窗口创建 2 个内容字符串变量：content1，content2

为每个标记添加一个侦听器（鼠标悬停）以显示内容字符串。添加一个侦听器（mouseout）以关闭与标记关联的信息窗口。

google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});

// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});

【讨论】：

【解决方案2】：

您可以为每个标记提供 id..并且可以使用它们的 id 访问这些标记：

var marker = new google.maps.Marker({
  position:mycenter,
  title:infoName,
  id: count++
  // animation:google.maps.Animation.BOUNCE
  });

 if(marker.id == count) //get access to marker id value..
 {
     //do what you want..
 }

【讨论】：