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

How to show two map with one script?

本文关键字：两个 地图 显示 何用一 脚本      更新时间：2023-09-26

我发现了一个关于使用两个id显示两个映射的问题;Map和map1。首先，我使用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>

我认为问题出在你对文档的调用上。querySelectorAll，如果你想使用多个选择器，你必须使用单个字符串，用逗号分隔选择器:

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

虽然可以进行多个map初始化，但不能对一个对象进行初始化。创建变量map包含许多属性，包括它在页面中的位置，因此它必须只属于一个映射。您可以将map引用到另一个变量，但是您不能在一个google.maps.Map()对象中保存两个映射信息。

想想如果允许的话。中心，标记等等，在两张地图中一切都是一样的。然而，它们是两个不同的映射，它们的id也不同(对象id)。

假设你改变了第一张地图的中心。如果调用map.getCenter();，将检索哪些地图的中心?

为了避免冲突，不允许将多个选择传递给一个google.maps.Map()对象构造函数。

简而言之，您需要使用不同的变量创建您的映射。

相关文章：