我在编码方面并不是很有经验（除了 HTML 和 CSS），我想创建一个邻里地图，其中包含自定义多边形区域，当鼠标悬停时突出显示并可点击，弹出一个小图像和其他信息。基本上，我试图重新创建你在http://www.redoakrealty.com/east-bay-ca-neighborhoods/中看到的内容... 我想知道他们是如何创建它的，我猜他们使用了 Google Maps API 来创建这个，但我不确定该如何做。我希望能听听您对他们创建此功能的想法以及我如何创建相同功能的建议。谢谢... 这似乎也是许多其他人尝试创建或了解如何创建的内容。
2个回答
4
以下是一个完整的、简单的示例，演示了如何实现此功能。为了简化起见，它只显示一个以纬度/经度（0，0）为中心的正方形作为示例。
基本上，您需要执行以下操作（每个项目符号对应JavaScript代码中的一个编号注释）：
<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代码中的一个编号注释）：
- 创建一个地图。
- 在地图上为每个邻里绘制多边形。
- 为每个多边形添加“click”事件的监听器。当单击多边形时，将调用监听器函数。这里，我只显示一个警报-您可以做任何其他您喜欢的事情。
- 为每个多边形添加“mouseover”事件的监听器。当鼠标悬停在多边形上时，将调用监听器函数。在处理程序中，将多边形的描边和填充颜色更改为其他颜色。
- 为每个多边形添加“mouseout”事件的监听器。当鼠标停止悬停在多边形上时，将调用监听器函数。在处理程序中，将多边形的描边和填充颜色更改回其原始值。
- Mac
1
地图的API在这里：https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays
看起来纸上很简单，但实际上可能会更加复杂。
在API中可以看到几件事情，首先：
// Define the LatLng coordinates for the polygon.
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)
];
那些是坐标，总共只有三个，所以形成了一个三角形的形状。该形状会自动完成，您只需找到/输入坐标。在这种情况下，triangleCoords是您分配给值集的名称，您将在下一行中再次使用此名称。
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
在路径：trianglecoords处，您可以自定义覆盖层。最后
// Add a listener for the click event.
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
将点击事件更改为悬停/鼠标悬浮事件（不确定是哪种，我自己没有做过，但似乎会是其中之一）。您可以使其适用于悬停和点击事件，但不太确定如何实现，但肯定是可能的。
function showArrays(event) {
//Javascript & Jquery goes here, probably the more challenging part to implement.
}
- GSimon
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接