C# 单页多个谷歌地图

C# 单页多个谷歌地图,c#,javascript,asp.net,google-maps,C#,Javascript,Asp.net,Google Maps,我想在我的C#ASP.NET应用程序页面中添加多个Google maps API地图。但是,在我当前的代码中,只显示最后一张地图。应该包含映射的所有其他div都是空的。正如您在我的代码中所看到的,地图已经有了唯一的名称(虽然不是很好,但它是唯一的)。有人能解释一下我做错了什么吗? 非常感谢 初始化谷歌: protected void loadGoogle() { var googleScript = "function loadScript() {" + "var scr

我想在我的C#ASP.NET应用程序页面中添加多个Google maps API地图。但是,在我当前的代码中,只显示最后一张地图。应该包含映射的所有其他div都是空的。正如您在我的代码中所看到的,地图已经有了唯一的名称(虽然不是很好,但它是唯一的)。有人能解释一下我做错了什么吗? 非常感谢

初始化谷歌:

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);
}
创建地图(多次调用):

召集人:

While循环,使用添加新div的
literal.Text
,后跟
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 += "};";
var script=“function initialize(){var geocoder=new google.maps.geocoder();”;
对于(int i=0;i

现在绘制了所有地图,但只有最后一张地图具有正确的位置。其他的基于latlng变量。为什么不能多次使用地理编码器?

也许只是浏览器中启动了最后一个
初始化
功能?尝试只使用一个初始化函数来初始化所有地图。

首先要做的是暂时忽略C方面的内容,并使用javascript实现解决方案。创建一个或多个包含所需信息的数组,并循环使用该数组来创建地图。一旦这项工作正常,添加C#。我认为您在每个循环中添加了一个新的“var latlng”,这将导致重新定义其值。尝试在每个循环中声明一个唯一的latlng变量名,例如“var latlng”+i+“=new…”。对于myOptions、map和addess也可能需要相同的功能。
 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 += "};";