我在编码方面不是很有经验(除了 html 和 css)，我正在尝试创建一个带有区域自定义多边形的邻域 map ，当悬停在上面时突出显示并且可以点击，显示一个小图像和其他信息。基本上我正在尝试重新创建您在 http://www.redoakrealty.com/east-bay-ca-neighborhoods/ 上看到的内容...我想知道他们是如何创建它的，我假设他们使用 google maps api 来创建它，但我不确定该怎么做。如果您对他们如何创建它以及我如何着手创建相同的东西有想法，我将不胜感激。谢谢……这似乎也是许多其他人正在尝试创建或弄清楚如何创建的东西。
最佳答案
以下是如何实现此目的的完整、简单的示例。为了简单起见，它只是显示一个以纬度/经度 (0, 0) 为中心的正方形作为演示。
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&sensor=false"></script>
<script type="text/javascript">
function init() {
// STEP 1: Create a map in the map div.
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 5
});
// STEP 2: Create a polygon - in this case a red square centred at (0, 0). You'd want to create a polygon per neighbourhood.
var polygon = new google.maps.Polygon({
map: map,
paths: [
new google.maps.LatLng(-1.0, -1.0),
new google.maps.LatLng(-1.0, +1.0),
new google.maps.LatLng(+1.0, +1.0),
new google.maps.LatLng(+1.0, -1.0)
],
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.5
});
// STEP 3: Listen for clicks on the polygon.
google.maps.event.addListener(polygon, 'click', function (event) {
alert('clicked polygon!');
});
// STEP 4: Listen for when the mouse hovers over the polygon.
google.maps.event.addListener(polygon, 'mouseover', function (event) {
// Within the event listener, "this" refers to the polygon which
// received the event.
this.setOptions({
strokeColor: '#00ff00',
fillColor: '#00ff00'
});
});
// STEP 5: Listen for when the mouse stops hovering over the polygon.
google.maps.event.addListener(polygon, 'mouseout', function (event) {
this.setOptions({
strokeColor: '#ff0000',
fillColor: '#ff0000'
});
});
};
</script>
<style>
#map {
width: 300px;
height: 200px;
}
</style>
</head>
<body onload="init();">
<div id="map"></div>
</body>
</html>
基本上，您执行以下操作(每个点对应 JavaScript 代码中的编号注释):
- 创建 map 。
- 在 map 上为您的每个街区绘制多边形。
- 为每个多边形添加一个“点击”事件的监听器。只要单击多边形，就会调用监听器函数。在这里，我只是显示一个警告 - 你可以做任何你喜欢的事情。
- 为每个多边形添加一个“鼠标悬停”事件的监听器。只要鼠标悬停在多边形上，就会调用监听器函数。在处理程序中，将多边形的描边和填充颜色更改为不同的颜色。
- 为每个多边形添加一个“mouseout”事件的监听器。只要鼠标停止悬停在多边形上，就会调用监听器函数。在处理程序中，将多边形的笔触和填充颜色更改回其原始值。
希望一切都有意义。如果您需要更多信息，Google Maps JavaScript API reference是找到所有相关详细信息的地方。可能也值得您花时间查看 examples 中的一些内容，特别是 simple-polygon和 simple-event示例。
关于javascript - 谷歌地图多边形悬停可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19991585/