如何在一个页面中显示带有弹出按钮的多个谷歌地图

How to Display Multiple Google Maps with popup buttons in one page

本文关键字：按钮 谷歌地图 显示 一个      更新时间：2023-09-26

在下面的脚本中，我想在一个页面中提供多个地图，但是当我单击相应的按钮时，它们必须出现在弹出窗口中。因此，该页面中将有几个按钮，每个地图一个按钮，地图显示在弹出窗口中。

第一个按钮正常，但第二个按钮不起作用。我该怎么做才能使其工作并添加其他内容？

谢谢！

<html>
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
    $(function () {
        $("#btnShow").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: "Map",
                width: 600,
                hright: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {
    var latlng1 = new google.maps.LatLng(18.520266,73.856406);
    var latlng2 = new google.maps.LatLng(28.579943,77.330006);
    var myOptions1 =
    {
        zoom: 15,
        center: latlng1,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var myOptions2 =
    {
        zoom: 10,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map1 = new google.maps.Map(document.getElementById("map_canvas_1"), myOptions1);
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
    var myMarker1 = new google.maps.Marker(
    {
        position: latlng1,
        map: map1,
        title:"Local"
   });
    var myMarker2 = new google.maps.Marker(
    {
        position: latlng2,
        map: map2,
        title:"Local"
    });
                }
            });
        });
    });
</script>
</head>
<body>

<input id="btnShow" type="button" value="Open Map 1"/>
<div id="dialog" style="display: none">
<div id="map_canvas_1" style="height: 380px; width: 580px;"></div>
</div>
<br /><br />
<input id="btnShow" type="button" value="Open Map 2"/>
<div id="dialog" style="display: none">
<div id="map_canvas_2" style="height: 380px; width: 580px;"></div>
</div>

</body>
</html>

这个解决方案并不是真正的DRY，但解决了你的问题。

看看它以了解发生了什么，然后你可以重构以获得更短的代码（如果你有两个以上的映射，这一点很重要）。查看官方文档可能会有所帮助。

    <html>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>
    <script type="text/javascript">
        $(function () {
            $("#btnShow_map1").click(function () {
                $("#dialog_map1").dialog({
                    modal: true, 
                    title: "Map",
                    width: 600,
                    hright: 450,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    open: function () {
                        var latlng1 = new google.maps.LatLng(18.520266,73.856406);
                        var myOptions1 =
                        {
                            zoom: 15,
                            center: latlng1,
                            mapTypeId: google.maps.MapTypeId.SATELLITE
                        };

                        var map1 = new google.maps.Map(document.getElementById("map_canvas_1"), myOptions1);
                        var myMarker1 = new google.maps.Marker(
                        {
                            position: latlng1,
                            map: map1,
                            title:"Local"
                       });
                    }
                });
            });
            $("#btnShow_map2").click(function () {
                $("#dialog_map2").dialog({
                    modal: true, 
                    title: "Map",
                    width: 600,
                    hright: 450,
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    open: function () {
                        var latlng2 = new google.maps.LatLng(28.579943,77.330006);
                        var myOptions2 =
                        {
                            zoom: 10,
                            center: latlng2,
                            mapTypeId: google.maps.MapTypeId.SATELLITE
                        };  

                        var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
                        var myMarker2 = new google.maps.Marker(
                        {
                            position: latlng2,
                            map: map2,
                            title:"Local"
                        });
                    }
                });
            });
        });
    </script>
    </head>
    <body>

    <input id="btnShow_map1" type="button" value="Open Map 1"/>
    <div id="dialog_map1" style="display: none">
    <div id="map_canvas_1" style="height: 380px; width: 580px;"></div>
    </div>
    <br /><br />
    <input id="btnShow_map2" type="button" value="Open Map 2"/>
    <div id="dialog_map2" style="display: none">
    <div id="map_canvas_2" style="height: 380px; width: 580px;"></div>
    </div>

    </body>
</html>

不能使用一个 id 将事件处理程序绑定到多个项。为此使用类。

来自w3schools：

编号

指定元素的唯一 ID。命名规则：

  • 必须至少包含一个字符
  • 不得包含任何空格字符
  • 在 HTML 中，所有值都不区分大小写
相关文章：