个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 12:35:08 27 4
gpt4 key购买 nike

我在编码方面不是很有经验(除了 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&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. 创建 map 。
  2. 在 map 上为您的每个街区绘制多边形。
  3. 为每个多边形添加一个“点击”事件的监听器。只要单击多边形，就会调用监听器函数。在这里，我只是显示一个警告 - 你可以做任何你喜欢的事情。
  4. 为每个多边形添加一个“鼠标悬停”事件的监听器。只要鼠标悬停在多边形上，就会调用监听器函数。在处理程序中，将多边形的描边和填充颜色更改为不同的颜色。
  5. 为每个多边形添加一个“mouseout”事件的监听器。只要鼠标停止悬停在多边形上，就会调用监听器函数。在处理程序中，将多边形的笔触和填充颜色更改回其原始值。

希望一切都有意义。如果您需要更多信息，Google Maps JavaScript API reference是找到所有相关详细信息的地方。可能也值得您花时间查看 examples 中的一些内容，特别是 simple-polygon和 simple-event示例。

关于javascript - 谷歌地图多边形悬停可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19991585/

27 4 0
文章推荐： javascript - 删除信息窗口的右边距和底部边距
文章推荐： linux - 我如何将多个目录展平并叠加到一个目录中？
文章推荐： regex - 我如何替换在 linux 中特定文件夹中找到的所有电子邮件地址
文章推荐： javascript - 重新选择并上传相同的文件
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com