1

每当用户将鼠标悬停在地图上的多边形上时，我都会尝试在 infowindows 中显示动态数据。调试显示数据和其他信息窗口/多边形设置都很好。我能够在鼠标悬停时获得颜色变化，只是 infowindows 没有出现。背后的原因可能是什么？我在这里想念什么？

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);
4

2 回答 2

4

如果您在该行中省略“this”会发生什么：

this.infoWindow.open(map, this);

?

在过去的几天里，我一直在与类似的事情作斗争，刚刚发现我的代码适用于 google.maps.Markers（如在 Google pin 中），但不适用于 google.maps.Circles（我猜是 google.maps.Polygons。）

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

编辑：

在我的情况下，这不起作用（假设全局变量映射）

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

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

想想上面的帖子，打开后设置位置大概会覆盖锚位置，从而使其出现。

于 2012-05-25T14:31:33.280 回答
0

首先打开 InfoWindow，然后设置它的位置：

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

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

我不知道解决这个问题的方法（尝试超时，但也不可靠）。我只考虑将 Infowindow 放在预设位置而不是 event.latLng。

于 2012-05-25T14:20:48.700 回答