多个地理编码器请求谷歌地图api v3

嗨我一直在使用谷歌地图API v3和地理编码器来显示地图，它的运行良好。当我试图在同一页面上显示另一张地图时，只加载第一张地图。第二张地图只显示一个灰色区域。没有地图加载。我必须做多个地址解析器请求，但我该如何解决它。这是我到目前为止的代码：多个地理编码器请求谷歌地图api v3

var geocoder; 
var map; 
var map2; 
var marker; 
var infobox; 

function initialize() { 
      //Geocoder 
     geocoder = new google.maps.Geocoder(); 
     var address = 'Times Square, New York'; 
     geocoder.geocode({ 'address': address }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
      //Marker 
      var companyLogo = new google.maps.MarkerImage('images/pin.png', 
       new google.maps.Size(20,20), 
       new google.maps.Point(0,0), 
       new google.maps.Point(10,10) 
       ); 
      //Marker shadow 
      var companyShadow = new google.maps.MarkerImage('images/pin_shadow.png', 
       new google.maps.Size(25,33), 
       new google.maps.Point(0,0), 
       new google.maps.Point(0, 25) 
       ); 
      //Display the marker 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: companyLogo, 
       shadow: companyShadow, 
       position: results[0].geometry.location, 
       title:"Some title" 
      }); 
      //Infobox 
      infobox = new InfoBox({ 
       content: document.getElementById("infobox"), 
       disableAutoPan: false, 
       maxWidth: 320, 
       pixelOffset: new google.maps.Size(-142, -150), 
       zIndex: null, 
       boxStyle: { 
        opacity: 1, 
        width: "300px" 
        }, 
       closeBoxMargin: "0px", 
       closeBoxURL: "images/close_tooltip.png", 
       infoBoxClearance: new google.maps.Size(1, 1) 
       }); 
         //Open infobox 
      google.maps.event.addListener(marker, 'mouseover', function() { 
       infobox.open(map, this); 
       map.panTo(geocoder); 
       }); 

      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 

        //Map options 
     var myOptions = { 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true, 
      scrollwheel: false 
     } 
    //Call Maps 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

来源

2012-08-08 Uhura

“它不工作”... *什么*不工作？地理编码器？第二张地图？ “不工作”是什么意思？错误控制台中记录了哪些错误？（等等） – 2012-08-08 16:37:09

抱歉，我应该指定。第一张地图工作正常。第二张地图根本不会出现。 – Uhura 2012-08-08 16:42:26

用来设置了第二张地图不包含center属性，所以第二个地图无法集中的myOptions对象。

当地理编码器被调用时，您将第一个地图的中心：

map.setCenter(results[0].geometry.location);

，但你不设置第二个地图。

没有设置地图的中心，它将保持灰色和空白。

来源

2012-08-08 16:46:35

感谢，使地图出现，但当然只有在两个地图中的同一位置。我现在有两张相同的地图。你能否指出我如何获得两个或更多不同地点的解决方案？ – Uhura 2012-08-08 16:53:03

您*可以*只是重复您已经拥有的“地图”代码，但使用'map2'，以便将结果应用于正确的地图。但是，无论如何，每次打开页面时都不应该对已知位置进行地理编码。只需找到想要显示的地点的坐标，并用'setCenter（）'设置每个地图的中心。更少的代码出错，减少对Google资源的调用（对用户来说也更快）。 – 2012-08-08 17:50:51

感谢您的提示。我期待着使用Wordpress，所以这些位置将是未知的，并且由用户为每个帖子添加。无论如何，我想出了一些东西。 – Uhura 2012-08-09 08:52:59

多个地理编码器请求谷歌地图api v3

回答

相关问题