多個地理編碼器請求谷歌地圖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

回答

相關問題