Question

我在编码方面不是很有经验（除了html和css之外），我正在尝试使用区域的自定义多边形创建一个邻域地图，当悬停在上面并且可点击时会突出显示，从而产生一个小图像和附加信息。基本上我正在尝试重新创建你在http://www.redoakrealty.com/east-bay-ca-neighborhoods/看到的内容...我想知道他们是如何创建它的，我假设他们使用谷歌地图api来创建这个但我不知道如何做到这一点。我很感激你对他们如何创造它以及如何创造同样的东西的想法。谢谢......这似乎也是许多其他人正在尝试创建或弄清楚如何创建的东西。

Answer 1

以下是如何实现此目的的完整，简单的示例。为简单起见，它只显示一个以纬度/经度（0,0）为中心的正方形作为演示。

<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&amp;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”事件添加一个侦听器。只要鼠标停留在多边形上方，就会调用侦听器函数。在处理程序中，更改多边形的笔划并将颜色填充回原始值。

希望一切都有道理。如果您了解更多信息，Google Maps JavaScript API reference可以找到所有相关详细信息。您可能还值得花时间查看一些examples，特别是simple-polygon和simple-event示例。

Answer 2

地图的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.

}

谷歌地图多边形悬停可点击

2 个答案: