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

Question

I'm not very experienced in coding (besides html and css), I'm trying to create a neighborhood map with custom polygons of the areas, which highlight when hovered over and are clickable, bringing up a small image and additional info. 我在编码方面不是很有经验（除了html和css），我正在尝试创建一个带有自定义多边形区域的邻域地图，当悬停在上面时可以突出显示并可点击，从而显示一个小图像和其他信息。 Basically I'm trying to recreate what you see over at http://www.redoakrealty.com/east-bay-ca-neighborhoods/ ... I'm wondering how they created it, I'm assuming they used the google maps api to create this but I'm not sure how to do it. 基本上我正在尝试重新创建你在http://www.redoakrealty.com/east-bay-ca-neighborhoods/看到的内容......我想知道他们是如何创建它的，我假设他们使用谷歌映射api来创建这个，但我不知道该怎么做。 I would appreciate your thoughts on how they created it and how I can go about creating the same thing. 我很感激你对他们如何创造它以及如何创造同样的东西的想法。 Thanks ... this also seems to be something a lot of other people are trying to create or figure out how to create as well. 谢谢......这也似乎是许多其他人正在尝试创建或弄清楚如何创建的东西。

Answer 1

The following is a complete, simple example of how to achieve this. 以下是如何实现此目的的完整，简单的示例。 For simplicity, it just displays a square centred at latitude/longitude (0, 0) as a demo. 为简单起见，它只显示一个以纬度/经度（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>

Basically, you do the following (each dot point corresponds to a numbered comment in the JavaScript code): 基本上，您执行以下操作（每个点对应于JavaScript代码中的编号注释）：

Create a map. 创建一个地图。
Draw polygons on the map for each of your neighbourhoods. 在地图上为每个社区绘制多边形。
For each polygon, add a listener for "click" events. 对于每个多边形，为“click”事件添加一个侦听器。 The listener function is called whenever your polygon is clicked on. 只要单击多边形，就会调用侦听器函数。 Here, I just display an alert - you could do whatever else you like. 在这里，我只是显示一个警报 - 你可以做任何你喜欢的事情。
For each polygon, add a listener for "mouseover" events. 对于每个多边形，添加“mouseover”事件的侦听器。 The listener function is called whenever the mouse hovers over the polygon. 只要鼠标悬停在多边形上，就会调用侦听器函数。 In the handler, change the polygon's stroke and fill colours to something different. 在处理程序中，更改多边形的笔触并将颜色填充为不同的颜色。
For each polygon, add a listener for "mouseout" events. 对于每个多边形，为“mouseout”事件添加一个侦听器。 The listener function is called whenever the mouse stops hovering over the polygon. 只要鼠标停留在多边形上方，就会调用侦听器函数。 In the handler, change the polygon's stroke and fill colours back to their original values. 在处理程序中，更改多边形的笔划并将颜色填充回其原始值。

Hopefully that all makes sense. 希望一切都有意义。 If you're after more info, the Google Maps JavaScript API reference is the place to find all the relevant details. 如果您了解更多信息，可以使用Google Maps JavaScript API参考资料查找所有相关详细信息。 It may also be worth your time looking at some of the examples , and in particular the simple-polygon and simple-event examples. 您可能还值得花些时间查看一些示例，特别是简单多边形和简单事件示例。

Answer 2

The API for the maps is here: https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays 地图的API位于： https ： //developers.google.com/maps/documentation/javascript/examples/polygon-arrays

Seems fairly straightforward on paper, though could be more complicated in practice. 在纸面上看起来相当简单，但在实践中可能会更复杂。

In the API you can see a few things, first: 在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)
];

Those are the coordinatess, there's only three total so it forms a triangle shape. 那些是坐标，总共只有三个，所以它形成一个三角形。 The shape is completed automatically, you just have to find/enter the coordinates. 形状自动完成，您只需找到/输入坐标即可。 triangleCoords in this case is the name you assign to the set of values, you'll use this name again in the next line here 在这种情况下，triangleCoords是您为该组值指定的名称，您将在此处的下一行中再次使用此名称

// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});

where you see path: trianglecoords, use can customize the overlay here. 你看到路径：trianglecoords，使用可以在这里自定义叠加。 Finally 最后

// Add a listener for the click event.
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

Change the click event to a hover/mouseover event (not sure which, I haven't done this myself but it seems like it would be one of the two). 将click事件更改为hover / mouseover事件（不确定哪个，我自己没有这样做，但似乎它将是两个中的一个）。 You can make it work for a hover AND click event, again, not quite sure how that it done but certainly possible. 你可以让它适用于悬停和点击事件，再次，不太确定它是如何完成但当然可能。

function showArrays(event) {

//Javascript & Jquery goes here, probably the more challenging part to implement.

}

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

问题描述

2 个解决方案

解决方案1
4 2013-11-15 01:46:41

解决方案2
1 2013-11-15 01:27:34

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

问题描述

2 个解决方案

解决方案1 4 2013-11-15 01:46:41

解决方案2 1 2013-11-15 01:27:34

解决方案1
4 2013-11-15 01:46:41

解决方案2
1 2013-11-15 01:27:34