Question

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

我做了什么 我尝试了解和编辑Exhibit库中的'map-view.js'文件。然后我尝试根据these instructions手动编辑库文件，以便为独立地图添加叠加但没有成功。我也在Stackoverflow和使用互联网搜索引擎上搜索了类似的问题，但我得到的结果都与SIMILE Widgets或SIMILE Exhibit的时间线视图有关，而不是地图视图。

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

Answer 1

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

来源：我从2009年开始a discussion on Google Groups提出了解决方案的核心内容。这个解决方案需要根据我的情况进行大量修改，因为我使用的是Google Maps v3，而代码是针对v2的。在弄清楚版本冲突后，我使用Google Developers site将解决方案翻译为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>

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

如何将叠加图像添加到SIMILE Exhibit地图视图？

1 个答案: