Google Maps API v3：单击DOM元素时关闭infowindow [英] Google Maps API v3: Close infowindow when DOM element is clicked
问题描述
我第一次玩谷歌地图，所以我在CSS技巧上看了一个很好的教程： http://css-tricks.com/google-maps-slider/ 我喜欢使用jQuery比纯JS更好，本教程提供了一种很好的方式来点击在地图上显示标记的列表。
我喜欢这种方式，但我需要将infowindows添加到标记中。我做了哪些，但是当我点击列表上的某个地方并将地图移开时，infowindow保持打开！我认为这是因为我需要将infowindow.close（）附加到单击#locations li的事件上。
这是我的代码，它运行在document.ready上：
$（function（）{
var chicago = new google.maps.LatLng（41.924832，-87.697456），
pointToMoveTo，
first = true，
curMarker =新的google.maps.Marker（{}），
$ el;
var myOptions = {
zoom：10，
center：chicago，
mapTypeId：google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map（$（＃map_canvas）[0]，myOptions）; $ b $点击（功能（）{
$ el = $（this）;
$ b $（如果（！$ el。 hasClass（hover））{
$（＃locations li）。removeClass（hover）;
$ el.addClass（hover）;
if（！first）{
//清除当前标记
curMarker.setMap（）;
//设置缩放到芝加哥级
// map.setZoom（10）;
$ b $ //将平移地图移动到新位置
函数move（）{
pointToMoveTo = new google.maps.LatLng（$ el.attr（ data-geo-lat），$ el.attr（data-geo-long））;
map.panTo（pointToMoveTo）;
}
move（）;
//添加新标记
curMarker = new google.maps.Marker（{
position：pointToMoveTo，
map：map
}）;
// Infowindow：contenido
var contentString ='< p>'+ $ el.find（h3）。html（）+'< / p> ;';
contentString + ='hola';
var infowindow =新google.maps.InfoWindow（
{
尺寸：新google.maps.Size（150,50），
内容：contentString
}）;
//点击放大地图
google.maps.event.addListener（curMarker，'click'，function（）{
//map.setZoom （14）;
infowindow.open（map，curMarker）;
}）;
看起来您正在创建一个新的 InfoWindow 为每个标记。 从Google Maps API文档引用：
如果您只希望一次显示一个信息窗口（就像Google地图上的行为一样），您只需创建一个信息窗口您可以在地图事件（例如用户点击）上重新分配到不同的位置或标记。
因此，您可能只需创建一个 InfoWindow 对象，只需在初始化地图后，然后按如下所示处理点击事件处理程序：
$ b
google.maps.event.addListener（curMarker，'click'，function（）{
infowindow.setContent（contentString）;
infowindow.open（map，curMarker）;
}）;
然后， InfoWindow 会在您自动关闭点击一个新标记而不必调用 close（）方法。
I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/ I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map.
I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li".
Here's my code, which runs on document.ready:
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").click(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
function move(){
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
}
move();
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map
});
// Infowindow: contenido
var contentString = '<p>'+$el.find("h3").html()+'</p>';
contentString += 'hola' ;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content: contentString
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
//map.setZoom(14);
infowindow.open(map,curMarker);
});
It looks like you're creating a new InfoWindow for each marker. Quoting from the Google Maps API Docs:
If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).
Therefore, you may simply want to create one InfoWindow object just after you initialize your map, and then handle the click event handler as follows:
google.maps.event.addListener(curMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, curMarker);
});
Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.
这篇关于Google Maps API v3：单击DOM元素时关闭infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
