1

任务 我在 SIMILE Exhibit 中使用 Google 地图，并希望在其地图视图中添加图像叠加层。例如，将历史地图的图像叠加在地图上的某个区域上。

我所做的 我尝试理解和编辑 Exhibit 库中的“map-view.js”文件。然后我尝试根据这些说明手动编辑库文件以将叠加层添加到独立地图但没有成功。我也在 Stackoverflow 上搜索过类似的问题并使用互联网搜索引擎，但我得到的结果都与 SIMILE Widgets 或 SIMILE Exhibit 的时间线视图有关，而不是地图视图。

其他信息 我的任务是特定于地图视图的，我正在使用 Exhibit v2.3.0 和 Google Maps v3。目前，我能够成功地将多边形和折线作为叠加层添加到地图上。

4

1 回答 1

0

回答我自己的问题，但这需要付出很多努力和研究才能得到答案。希望这可以帮助其他人遇到这个问题。所以解决方案在于 JavaScript。

资料来源：我在 2009 年遇到了关于 Google Groups 的讨论，该讨论提出了我的解决方案的核心。这个解决方案需要针对我的情况进行大量修改，因为我使用的是 Google Maps v3，而代码是针对 v2。在找出版本冲突后，我使用Google Developers 网站将解决方案翻译为 API v3 语法。我需要的特定覆盖在文档中称为地面覆盖。

解决方案：这是适用于 Exhibit v2.3.0 和 Google Maps v3 的最终解决方案。需要将此代码段添加到该<head>部分。

<script type="text/javascript">
    var map;
    var oldMapViewReconstruct = Exhibit.MapView.prototype._reconstruct;
    Exhibit.MapView.prototype._reconstruct = function() {
        oldMapViewReconstruct.call(this);
        map = this._map;
        var imageBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(40.712216, -74.22655),
            new google.maps.LatLng(40.773941, -74.12544));

        historicalOverlay = new google.maps.GroundOverlay(
            'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
            imageBounds);
        historicalOverlay.setMap(map);
    }
</script>

注意：当然，出于说明目的，我只是给出了一个覆盖历史地图的具体示例，但可以更改以适应类似目的。要叠加的图像是新泽西州纽瓦克的，其坐标是手动设置的（取自地面叠加层的文档示例）。请注意，如果您实施此操作，您可能必须手动缩放到附近的纽约才能看到解决方案的工作情况并显示叠加层，因为我没有添加用于自动居中或自动缩放的代码。另一个注意事项是我使用带有 Exhibit 的 MapView 容器来包含我的地图，例如<div ex:role="view" id="map1" ex:viewClass="MapView" ...

于 2014-02-08T00:26:57.473 回答