Question

从代码隐藏中，我在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是从持久存储中检索的对象）

这就是发生的事情：

issue

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

这真的很有趣（嗯，不是真的），因为它发生在Chrome中，但在IE中工作正常。有人有解决方案，线索，建议或魔药吗？提前谢谢。

编辑：我还尝试将从codebehind插入的脚本更改为此，但仍无法正常工作（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)

Answer 1

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

从代码中添加Google Map

1 个答案: