单个页面上的多个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地图

回答

相关问题