4

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

4

2 回答 2

4

下面是一个完整的、简单的例子来说明如何实现这一点。为简单起见，它仅显示一个以纬度/经度 (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 代码中的编号注释）：

  1. 创建地图。
  2. 在地图上为您的每个社区绘制多边形。
  3. 对于每个多边形，为“点击”事件添加一个侦听器。每当单击多边形时，都会调用侦听器函数。在这里，我只是显示一个警报——你可以做任何你喜欢的事情。
  4. 对于每个多边形，为“鼠标悬停”事件添加一个侦听器。只要鼠标悬停在多边形上，就会调用侦听器函数。在处理程序中，将多边形的笔触和填充颜色更改为不同的颜色。
  5. 对于每个多边形，为“mouseout”事件添加一个侦听器。只要鼠标停止悬停在多边形上，就会调用侦听器函数。在处理程序中，将多边形的笔触和填充颜色更改回其原始值。

希望这一切都说得通。如果您想了解更多信息，Google Maps JavaScript API 参考是查找所有相关详细信息的地方。也值得您花时间查看一些示例，尤其是简单多边形和简单事件示例。

于 2013-11-15T01:46:41.233 回答
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.

}
于 2013-11-15T01:27:34.830 回答