Javascript 当鼠标悬停在 Google Map v3 中的特定区域时，如何更改鼠标光标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2557679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the mouse cursor when I mouseover on a particular area in Google Map v3?
提问by zjm1126
Using the Google Maps API v3: How do I change the mouse cursor when I mouseover on a particular area?
使用 Google Maps API v3：当鼠标悬停在特定区域时如何更改鼠标光标？
回答by Daniel Vassallo
Yes, this is possible by setting draggableCursorin MapOptions, as in the following example:
是的，这可以通过draggableCursor在 MapOptions 中进行设置来实现，如下例所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v3 Change Cursor Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.3, 150.6)
});
var ne = new google.maps.LatLng(-34.00, 150.00);
var nw = new google.maps.LatLng(-34.00, 150.50);
var sw = new google.maps.LatLng(-35.00, 150.50);
var se = new google.maps.LatLng(-35.00, 150.00);
var boundingBox = new google.maps.Polyline({
path: [ne, nw, sw, se, ne],
strokeColor: '#FF0000'
});
boundingBox.setMap(map);
google.maps.event.addListener(map, 'mousemove', function(event) {
if ((event.latLng.lat() > se.lat()) && (event.latLng.lat() < ne.lat()) &&
(event.latLng.lng() > ne.lng()) && (event.latLng.lng() < sw.lng())) {
map.setOptions({ draggableCursor: 'crosshair' });
}
else {
map.setOptions({ draggableCursor: 'url(http://maps.google.com/mapfiles/openhand.cur), move' });
}
});
</script>
</body>
</html>
If you run the above example, the cursor would change to a cross hair once the mouse is moved inside the red rectangle.
如果你运行上面的例子，一旦鼠标移动到红色矩形内，光标就会变成十字线。
回答by nomis
Other answers advising to to put 'mousemove' listeners on the whole map object will work but are wrong. This is 'heavy handed' and a bad idea as listeners like these can add up in a real application and when combined with other things happening on your map, can cause serious performance problems and possibly unforeseen race conditions!
建议在整个地图对象上放置“mousemove”侦听器的其他答案将起作用，但是是错误的。这是“重手”和一个坏主意，因为像这样的侦听器可以在实际应用程序中累加，并且当与地图上发生的其他事情相结合时，可能会导致严重的性能问题和可能无法预见的竞争条件！
The BEST way to do this is to use the google.maps.Polygonclass. This allows you to pass a series of LatLng objects to create a Polygon. This polygon is rendered on the map and has a default mouseover attribute of 'pointer', you can add a 'mouseover' listener to the object returned from the new google.maps.Polygonclass call.
最好的方法是使用google.maps.Polygon类。这允许您传递一系列 LatLng 对象来创建多边形。该多边形在地图上呈现，并且具有“指针”的默认鼠标悬停属性，您可以向从new google.maps.Polygon类调用返回的对象添加“鼠标悬停”侦听器。
The source below is from this example http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
下面的来源来自这个例子 http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Then I can add the listener like this
然后我可以像这样添加监听器
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
