Question

我正在使用Google API V3，我希望有一个地面叠加层，并且在此叠加层上有一个多边形，可以在鼠标悬停时更改颜色。只要没有定义地面叠加，鼠标悬停事件就可以正常工作。但是如果存在地面叠加层，则鼠标悬停时颜色不会改变。

有什么建议吗？

以下是一个例子：

var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216,-74.213393),
new google.maps.LatLng(40.765641,-74.139235));

var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

var oldmap = new google.maps.GroundOverlay(
"http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
imageBounds);
oldmap.setMap(map);

//Points to create polygon
var points = [
new google.maps.LatLng(40.735657,-74.172367),
new google.maps.LatLng(40.743588,-74.179498),
new google.maps.LatLng(40.732878,-74.182777)
]
//Create Polygon
var poly = new google.maps.Polygon({
    path: points,
    map: map,
    strokeColor: '#ff0000',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#ff0000',
    fillOpacity: 1
});

//poly changes color on mouseover
google.maps.event.addListener(poly, 'mouseover', function() {
    poly.setOptions({
        strokeColor: '#0000ff',
        fillColor: '#0000ff'
    });
});

//poly changes color back on mouseout
google.maps.event.addListener(poly, 'mouseout', function() {
    poly.setOptions({
        strokeColor: '#ff0000',
        fillColor: '#ff0000'
    });
});

Answer 1

您可能需要为背景创建自定义叠加层，因为您可以更好地控制地面叠加层所在的地图图层。

http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

这不一定是问题，因为我没有尝试过您的代码，但一个好的策略是使用Firebug的html检查器来查看形状是如何标记的，看看有没有什么可以用css / javascript来做改变他们的优先权。

Google API V3：如果还定义了groundOverlay，则会出现多边形鼠标悬停事件的问题

1 个答案: