多个谷歌地图在一个页面上
本文关键字:一个 谷歌地图 | 更新日期: 2023-09-27 18:05:50
我想添加多个地图的谷歌地图API到我的c# ASP页面。网络应用程序。但是,使用我当前的代码,只显示最后一个地图。所有其他应该包含map的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变量的。为什么地理编码器不能被多次使用?
也许只是最后一个initialize
函数在浏览器中发射?试着只用一个initialize函数来初始化所有的映射。