从后面的代码添加谷歌地图答案

【问题标题】：Adding Google Map from code behind从后面的代码添加谷歌地图
【发布时间】：2012-12-11 10:08:14
【问题描述】：

从代码隐藏中，我在 Panel 中添加了一些控件。其中一个控件是通用div，其中我使用JQuery UI Map 加载Google Map，并根据用户选择的某些选项将位置存储在数据库中。这没有任何问题。这是我的 JavaScript 函数：

function loadLocation(map, latitude, longitude) {
  var location = latitude + ',' + longitude;
  $('div[id=' + map + ']').gmap().bind('init', function (ev, map) {
    $(this).gmap('addMarker', { 'position': location, 'bounds': true }).click(function () { });
    $(this).gmap('option', 'zoom', 4);
    $(this).gmap('option', 'disableDefaultUI', true);
  });
}

现在，当用户更改其选择时，我首先清除提到的Panel 中的所有控件，以便再次添加所有控件，包括带有地图的 div。这是我的 vb 代码：

Dim divForMap As New HtmlGenericControl("div")
divForMap .Attributes.Add("style", "float: right; width: 300px; height: 150px;")
containerPanel.Controls.Add(divForMap)

Dim script As String = "loadLocation('" & divForMap.ClientID & "', '" & oSubstation.latitude & "', '" & oSubstation.longitude & "');"
script &= "$(document).ready($('#" & containerPanel.ClientID & "').stop().fadeOut(0).fadeIn(100));"
ScriptManager.RegisterStartupScript(Page, Page.GetType, Guid.NewGuid.ToString, script, True)

ps：（oSubstation 是从持久存储中检索的对象）

这就是正在发生的事情：

1：用户选择一个选项，地图完美显示，标记在指定位置并以该位置为中心。
2：用户改变了选项，位置也改变了，但是地图的渲染出了点问题。
3：如果用户更改浏览器选项卡然后返回，地图现在可以很好地呈现，但它不在标记的位置居中。
4：用户必须手动移动地图才能找到位置。

这真的很有趣（好吧，不是真的），因为它发生在 Chrome 中，但在 IE 中运行良好。有人有解决方案、线索、建议或魔法药水吗？提前致谢。

编辑：我也尝试将插入的脚本从代码隐藏更改为此，但仍然无法正常工作（ps。Chrome 的控制台没有显示任何错误或警告）：

Dim script As String = "$(document).ready(function() { "
script &= "               loadLocation('" & divForMap.ClientID & "', '" & oSubstation.latitude & "', '" & oSubstation.longitude & "');"
script &= "               $('#" & containerPanel.ClientID & "').stop().fadeOut(0).fadeIn(100);"
script &= "             });"
ScriptManager.RegisterStartupScript(Page, Page.GetType, Guid.NewGuid.ToString, script, True)

【问题讨论】：

尝试使用 Jquery 插件 1.gmap3.net/en/pages/19-demo 2.2.smashinglabs.pl/gmap
非常感谢。如果最终没有人为我提供解决方案，我将使用它。但目前我在网站的几个页面中使用了 JQuery UI Map，我更愿意继续使用它。

标签： asp.net vb.net jquery-ui google-maps updatepanel

【解决方案1】：

好的，现在它正在工作。我已将样式 display: none 应用于容器 Panel 以实现淡入效果。似乎只是删除这种样式，一切正常。再次感谢@Pragnesh Patel，我希望它对某人有所帮助。

【讨论】：