單個頁面上的多個Google地圖

我想將Google Maps API的多個地圖添加到我的C＃ASP.NET應用程序的頁面中。但是，用我現在的代碼，只顯示最後的地圖。所有其他應該包含地圖的div都是空的。正如你在我的代碼中看到的那樣，這些地圖已經有了獨特的名字（不是很好，但它是唯一的）。有人能解釋我做錯了什麼嗎？這將是非常感謝。單個頁面上的多個Google地圖

初始化谷歌：

protected void loadGoogle() 
{ 
    var googleScript = "function loadScript() {" + 
     "var script = document.createElement(\"script\");" + 
     "script.type = \"text/javascript\";" + 
     "script.src = \"http://maps.google.com/maps/api/js?sensor=false& callback=initialize\"; " + 
     "document.body.appendChild(script);" + 
     "}" + 
     "window.onload = loadScript;"; 
    ClientScript.RegisterStartupScript(typeof(Page), "CreateGoogleMapScript", googleScript, true); 
}

製作地圖（稱爲多次）：

protected void createMap(String mapId, String address) 
{ 
    var script = "function initialize() {" + 
     "var geocoder = new google.maps.Geocoder();" + 
     "var latlng = new google.maps.LatLng(-34.397, 150.644);" + 
     "var mapOptions" + mapId + " = {" + 
     "zoom: 16," + 
     "center: latlng," + 
     "mapTypeId: google.maps.MapTypeId.ROADMAP" + 
     "};" + 
     " var map" + mapId + " = new google.maps.Map(document.getElementById(" + mapId + "), mapOptions" + mapId + ");" + 

     "var address = \"" + address + "\";" + 
     "geocoder.geocode({ 'address': address}, function(results, status) {" + 
     "if (status == google.maps.GeocoderStatus.OK) {" + 
     "map" + mapId + ".setCenter(results[0].geometry.location);" + 
     "var marker = new google.maps.Marker({" + 
     "map: map" + mapId + "," + 
     "position: results[0].geometry.location" + 
     "});" + 
     "} else {" + 
     "alert(\"Geocode was not successful for the following reason: \" + status); " + 
     "}" + 
     "});" + 
     "}"; 
    ClientScript.RegisterClientScriptBlock(typeof(Page), "CreateMapScript"+mapId, script, true); 
}

通過調用：

While循環，具有literal.Text，增加了一個新的div，其次是createMap(mapId, address);

更新：

我的新代碼：

var script = "function initialize() { var geocoder = new google.maps.Geocoder();";     

      for (int i = 0; i < maps.Count; i++) 
      { 
       String currentId = maps[i] as String; 
       String currentLocation = locations[i] as String; 

       script += " " + 
        "var latlng = new google.maps.LatLng(" + 500 + "," + 400 + ");" + 
        "var myOptions = {" + 
         "zoom: 16," + 
         "center: latlng," + 
         "mapTypeId: google.maps.MapTypeId.ROADMAP" + 
        "};" +      
        "var map = new google.maps.Map(document.getElementById(\"" + currentId + "\"), myOptions);" + 

        "var address = \"" + currentLocation + "\";" + 
         "geocoder.geocode({ 'address': address}, function(results, status) {" + 
          "if (status == google.maps.GeocoderStatus.OK) {" + 
          "map.setCenter(results[0].geometry.location);" + 
          "var marker = new google.maps.Marker({" + 
           "map: map," + 
           "position: results[0].geometry.location" + 
          "});" + 
          "} else {" + 
           "alert(\"Geocode was not successful for the following reason: \" + status); " + 
          "}" + 
         "});"; 
      } 
      script += "};";

現在，所有的地圖繪製，但只有最後一個地圖有正確的位置。其他的是基於latlng變量的。爲什麼地理編碼器不能多次使用？

來源

2013-03-24 Attiej

要做的第一件事就是現在忽略C＃方面的東西，並獲得JavaScript解決方案。創建一個包含所需信息的數組或多個數組，以創建您的地圖。一旦這個工作，添加在C＃中。 – 2013-03-24 17:07:29

我想你在每個循環中追加一個新的'var latlng'，這會導致它的值被重新定義。嘗試在每個循環中聲明一個唯一的latlng變量名稱，例如「var latlng」+ i +「= new ....」。 myOptions，map和addess也可能需要。 – Netricity 2013-03-26 13:23:01

也許只是最後的initialize函數在瀏覽器中觸發？嘗試只有一個初始化所有地圖的初始化函數。

來源

2013-03-24 16:01:38 Netricity

單個頁面上的多個Google地圖

回答

相關問題