我正在尝试在 div 中显示 Google map ,该 div 是通过对 C# 程序的 PageMethod 调用创建的。 Pagemethod 返回生成的 html 代码,该代码使用 jquery 命令 $('.showitems').html(somecode); 插入到我的网页中。此代码包含一个 div,我想在其中放置 Google map ,但是当我执行 javascript 来创建 Google map 时,它会用空格替换该 div,而没有 map 。但是,如果我硬编码一个 div 来包含 map ,则用于创建 Google map 的 JavaScript 就可以工作。所以我的问题是,为什么我不能使用动态生成的 html 代码创建 Google map ?下面是我创建 Google map 的代码,除了动态生成的 div 之外,该代码已经运行了多年。
function ShowDinerItems(dinerkey) {
document.getElementById('HiddenDinerID').value = dinerkey;
var latitude = document.getElementById("Hiddenlat").value;
var longitude = document.getElementById("Hiddenlng").value;
location = document.getElementById("LocationText").textContent;
PageMethods.CallShowDinerItems(dinerkey, latitude, longitude, location, OnShowDinerComplete, OnShowDinerError, dinerkey);
}
function OnShowDinerComplete(result, dinerkey) {
$('.showitems').html(result[0]);
}
上面列出的showitems区域有一个跨度区域,可以点击获取 map ,如下所示:
<span style="cursor:pointer" onclick=\"DisplayDinerMap('40.0912345', '89.12345', `'m0001', 'diner name')\"> Map </span>`
<div id="m0001" style="height:200px; width:200px;display:inline">map</div>
动态生成的 div map 在 showitems div 中看起来像这样,其中“m001”是 map1 的 id。
function markDiner(lat, lng, content, map1) {
map = new google.maps.Map(document.getElementById(map1), {
zoom: 14,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
animation: google.maps.Animation.DROP,
title: content
});
}
用户单击 map 链接后,我调用 map 函数。在 Debug模式下,我可以看到执行通过 Map 例程。
function DisplayDinerMap(lat, lng, map1, dinername) {
markDiner(lat, lng, dinername, map1);
}
如果map1是硬编码的,则Google map 可以工作。如果它是通过调用 PageMethod 动态生成的,它不会显示 map ,而是在我编写的文字上显示空格,只是为了看看它是否消失。因此,在上面的示例中,当我尝试显示 map 时,文本“ map ”消失了。如有任何意见或建议,我们将不胜感激。
最佳答案
尝试向您用来触发事件的范围添加委托(delegate)。
关于c# - 无法在动态生成的 div 中显示 Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10646850/