[英]How do I zoom my map using Google Maps API v3 when I click a hyperlink?
[英]How do I change the mouse cursor when I mouseover on a particular area in Google Map v3?
使用Google Maps API v3:当鼠标悬停在特定区域时,如何更改鼠标光标?
是的,这可以通过在MapOptions中设置draggableCursor
来实现,如下例所示:
<!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>
如果运行上面的示例,一旦鼠标在红色矩形内移动,光标将变为十字线。
建议将'mousemove'监听器放在整个地图对象上的其他答案将起作用但是错误。 这是“苛刻的”,这是一个糟糕的主意,因为像这样的听众可以加入到真实的应用程序中,当与地图上发生的其他事情相结合时,可能会导致严重的性能问题和可能无法预料的竞争条件!
最好的方法是使用google.maps.Polygon
类。 这允许您传递一系列LatLng对象以创建多边形。 此多边形在地图上呈现并具有默认的鼠标悬停属性“指针”,您可以将“鼠标悬停”侦听器添加到new google.maps.Polygon
类调用返回的对象中。
以下来源来自此示例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);
然后我可以像这样添加监听器
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.