Javascript 如何用一个脚本显示两个地图？_Javascript_Google Maps

Javascript 如何用一个脚本显示两个地图？

javascript google-maps

Javascript 如何用一个脚本显示两个地图？,javascript,google-maps,Javascript,Google Maps,我发现使用两个ID显示两个地图有问题；首先，我使用了document.getElementByID（'map'），它正在工作。但是我想在代码下面调用两个id，map&map1，这不起作用谢谢 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>You

我发现使用两个ID显示两个地图有问题；首先，我使用了document.getElementByID（'map'），它正在工作。但是我想在代码下面调用两个id，map&map1，这不起作用

谢谢

 <!DOCTYPE HTML>
  <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your Website</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">

    jQuery(document).ready(function() {

      // Load google map
      var map = new google.maps.Map(document.querySelectorAll("#gmap","#gmap1"),  {
        center: new google.maps.LatLng(0,0),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false
      });




    });
    </script>
  </head>
  <body>
    <div style="padding-bottom:10px;"><input type="text" name="address" value="O. J. Brochs g 16a, Bergen" style="width:400px;border:1px solid black"><input type="button" name="search" value="Geocode"></div>
    <div id="coords"></div>
    <div id="gmap" style="width:370px; height:300px;"></div>

    <div style="padding-bottom:10px;"><input type="text" name="address" value="O. J. Brochs g 16a, Bergen" style="width:400px;border:1px solid black"><input type="button" name="search" value="Geocode"></div>
    <div id="coords"></div>
    <div id="gmap1" style="width:370px; height:300px;"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  </body>  
</html>


你的网站
jQuery（文档）.ready（函数（）{
//加载谷歌地图
var map=new google.maps.map（document.queryselectoral（“#gmap“，“#gmap1”）{
中心：新google.maps.LatLng（0,0），
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP，
泛控制：错误，
街景控制：错误，
mapTypeControl:false
});
});

我认为问题在于您对的调用，如果您想使用多个选择器，必须使用单个字符串，用逗号分隔选择器：

document.querySelectorAll("#gmap,#gmap1")

虽然可以进行多个贴图初始化，但不能对一个对象进行初始化。创建变量

map

包含许多属性，包括它在页面中的位置，因此它必须只属于一个map。您可以将
map
引用到另一个变量，但不能在一个
google.maps.map（）对象中保存两个映射信息如果允许的话。中心、标记等。两张地图上的一切都一样。但是，它们是两个不同的贴图，它们的ID不同（对象ID）假设您更改了第一个贴图的中心。如果调用map.getCenter（）将检索谁的地图中心为了避免冲突，不允许将多个选择传递给一个google.maps.Map（） object构造函数简言之，您需要使用不同的变量创建映射。您能举例说明用逗号分隔选择器的单个字符串吗？谢谢兄弟。我的回答中有一个例子-参见上面的代码映射API没有说可以用一个调用初始化两个映射（参见），看起来你必须进行两个单独的调用我只需要一个对象兄弟。