如何使用一页中的弹出式按钮显示多个Google地图

-1

在以下脚本中，我想在一个页面中制作多个地图，但当单击对应按钮时，它们必须出现在弹出窗口中。因此，该页面上会有几个按钮，每个地图都会有一个按钮，并且地图会显示在弹出窗口中。如何使用一页中的弹出式按钮显示多个Google地图

第一个按钮没问题，但第二个按钮不起作用。我能做些什么来使其工作并添加其他人？

谢谢！

<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>

来源

2016-02-26 José Roberto V. Costa

对于启动你should't了一倍的ID在同一个HTML页面中。事件处理程序将始终引用其中一个或另一个。测试通过删除第一个按钮HTML并查看第二个按钮是否实际打开第二个地图。 – Enrico

我做了，第二个按钮没有打开 –

控制台中的任何错误？ – Enrico

该解决方案是不是真的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

指定独特 ID为元素。命名规则：

必须包含至少一个字符
不得包含任何空格字符
在HTML中，所有值是不区分大小写

来源

2016-02-27 15:50:41 Enrico

如何使用一页中的弹出式按钮显示多个Google地图

回答

相关问题