谷歌地图不适合在多视图中工作？答案

【问题标题】：Google Maps not designed to work in multi-views?谷歌地图不适合在多视图中工作？
【发布时间】：2015-08-08 06:54:04
【问题描述】：

检查我对谷歌地图的理解：

我正在开发一个网页，显示我雇主设施的许多不同类型的信息。我一直在使用多视图，并根据用户输入（按钮工具栏）激活正确的视图。当我将视图添加为所选建筑物的地图时，我遇到了问题。当用户导航到建筑地图视图时，我可以使地图出现。但是当用户离开该视图时，地图 api 会给我错误

0x800a138f - JavaScript runtime error: Unable to get property 'offsetWidth' of undefined or null reference

据我了解，这是因为当另一个视图变为活动状态时，不再呈现包含地图的视图。 api 正在尝试访问不再存在的对象。

我可以尝试清除对象 - 删除所有侦听器，删除对象，甚至删除包含它的 div。但我刚刚阅读了how to destroy a map instance 上的相关问题，并听取了 Chris Broadfoot 和 Luke Mahe 对此主题的讨论。

由此，我的理解是谷歌地图 API 不是为这种处理而设计的。所以，它真的不是为了兼容多视图之类的东西而设计的。

这是正确的吗？如果没有，我错过了什么？如果是这样，对于网络应用新手有什么建议可以使用什么而不是多视图（我正在考虑面板并根据需要隐藏/显示）？

【问题讨论】：

地图都包含在同一个浏览器窗口中，并通过工具栏上的选择来打开和关闭？当一个地图被隐藏并显示另一个地图时会发生错误？
@scaisEdge - 单页应用程序 - 当用户选择不同的建筑物时更新单个地图对象。对于建筑物，用户可以选择显示建筑物中可用的房间、建筑物的图片或建筑物的地图。多视图中的一个视图显示房间，另一个用于图片，另一个用于地图。一切正常，直到用户选择显示地图（显示正确），然后选择显示其他内容，这会停用包含地图的视图（全部仍在同一页面中） - 这给出了错误。跨度>
您是如何进行停用的，您所说的关闭是什么意思？地图隐藏了？以什么方式？
@scaisEdge - 在 ASP 多视图控件中，您可以添加多个视图。您可以通过设置 ActiveViewIndex 来选择用户实际看到的视图。仅呈现当前活动的视图。当您更改索引时，先前活动的视图会“停用” - 即不再呈现。

标签： google-maps google-maps-api-3 multiviews

【解决方案1】：

更新和一种答案...
我切换到使用多个面板并隐藏所有面板，除了包含用户选择使用的信息的面板。然后地图显示为空白，除非我做了以下两件事之一：将要创建的地图设置为 endRequest...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myInitMap);

如果我理解正确，这意味着我的处理程序 (myInitMap) 在每次回发后都会执行（重新创建地图）。此外，这似乎有点不稳定 - 有时 IE 会给我错误，我无法找出模式或原因。 Chrome 每次都可以正常工作。

另一种可行的方法是不在任何特定事件上调用地图创建，而是从代码隐藏 page_load 事件中注册我的地图初始化脚本。我的面板和多视图已包含在更新面板中，我需要在该更新面板下注册脚本...

ScriptManager.RegisterStartupScript(DataUpdatePanel, DataUpdatePanel.GetType(), "ShowGoogleMap", "myInitMap();", true);

这是因为我认为导致问题的原因是我的面板（以及早期版本中的多视图）位于该 UpdatePanel 中。由于 UpdatePanel 执行了部分页面更新，地图创建脚本和 API 调用没有以正确的顺序发生。向脚本管理器注册地图初始化脚本基本上告诉它把它放在正确的位置（在最后？）部分页面更新。

另外，我不知道如何更新地图。该脚本基本上每次都在重新生成地图。我尝试保留一个指向地图的 var 指针，以便我可以测试它是否已经创建，然后只更新它，但这不起作用。我认为，UpdatePanel 部分页面更新与整个页面刷新非常相似，但仅针对 UpdatePanel 中包含的内容。所以当部分更新发生时，之前的内容会被处理掉并重新创建，因此地图也必须重新创建。

如果有人对此有不同的理解，我会喜欢一些重定向。

【讨论】：