谷歌地图API v3信息窗口在鼠标悬停/单击多边形时不显示

Question

每当用户将鼠标悬停在地图上的多边形上时，我都会尝试在信息窗口中显示动态数据。调试显示数据和其他信息窗口/多边形设置正常。我能够在鼠标悬停时更改颜色，只是信息窗口没有显示。背后的原因可能是什么？我在这里错过了什么？

statePolygon = new google.maps.Polygon({
    paths: stateBorderCoords,
    strokeColor: '#f33f00', 
    strokeOpacity: 1, 
    strokeWeight: 1,
    fillColor: '#ff0000', 
    fillOpacity: 0.2
});
statePolygon.pId = infoText; // Fetching from a JSON response
statePolygon.wPet = wPet;    // Fetching from a JSON response
statePolygon.infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(statePolygon,"mouseover",function(event){
    this.setOptions({fillColor: "#00FF00"});
    this.infoWindow.setPosition(event.latLng);
    this.infoWindow.setContent(this.wPet);
    this.infoWindow.open(map, this);
});
google.maps.event.addListener(statePolygon,"mouseout",function(){
    this.setOptions({fillColor: "#FF0000"});
    this.infoWindow.close();
});
google.maps.event.addListener(statePolygon, 'click', function(){
    //createInfoWindow(this.pId);
});
statePolygon.setMap(map);

Answer 1

如果在行中省略"this"会发生什么：

this.infoWindow.open(map, this);    

？

在过去的几天里，我一直在与类似的东西作斗争，只是发现我的代码适用于google.maps.Marks（如Google pins），但不适用于google.maps.Circles（我猜是google.maps.Polygons）。

我的猜测："infoWindow.open（map，object）"试图将InfoWindow锚定到对象上，似乎只适用于google.maps.Markers，而不是Circles，Polygons等。似乎有效的是"open（map）"，它不会将其锚定到任何东西。但是，必须显式设置信息窗口的位置（您已经在这样做）。

编辑：

就我而言，这不起作用（假设全局变量映射）

var circle = { clickable: true,
               strokeColor: "darkred",
               strokeOpacity: 1,
               strokeWeight: 1,
               fillColor: "green",
               fillOpacity: 1,
               map: map,
               center: new google.maps.LatLng(55.95,-3.19),
               radius: 45
            };
var marker1 = new google.maps.Circle(circle);
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
inoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map,marker1);

但这确实：

var circle = { clickable: true,
               strokeColor: "darkred",
               strokeOpacity: 1,
               strokeWeight: 1,
               fillColor: "green",
               fillOpacity: 1,
               map: map,
               center: new google.maps.LatLng(55.95,-3.19),
               radius: 45
            };
var marker1 = new google.maps.Circle(circle);
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
infoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map);

唯一的区别是在最后一行。

考虑到上面的帖子，打开后设置位置可能会覆盖锚点位置，从而使它出现。

Answer 2

首先打开信息窗口，然后设置其位置：

http://jsfiddle.net/fuDfa/

google.maps.event.addListener(statePolygon,"mouseover",function(event){
    this.setOptions({fillColor: "#00FF00"});
    this.infoWindow.setContent(this.wPet);
    this.infoWindow.open(map);
    this.infoWindow.setPosition(event.latLng);
});

但是，我意识到，如果鼠标移动到信息窗口的顶部（即使它在多边形的顶部），它将被视为鼠标移动到多边形之外。因此，多边形将变为红色，信息窗口将关闭。但由于鼠标仍在多边形内，信息窗口将再次打开，从而导致闪烁。

我不知道解决这个问题的方法（尝试了超时，但它也不可靠）。我只想把信息窗口放在预设位置，而不是event.latLng。