克隆谷歌地图实例答案

【问题标题】：clone google map instance克隆谷歌地图实例
【发布时间】：2011-06-29 20:31:15
【问题描述】：

我在一个页面上有一张地图，它显示了几个带有标记和信息窗口的地方。现在我想放一个全屏按钮并将地图加载到 jquery-ui 对话框中，但我遇到了一些问题。

有没有办法将我在一个 div 中创建的谷歌地图实例复制到另一个 div 中？

或任何其他解决方法，例如更改与地图关联的 div...科幻小说？？

【问题讨论】：

标签： jquery google-maps clone

【解决方案1】：

我认为 Google 地图本身不支持这种操作。

虽然看起来移动地图很简单。地图有一个 getDiv 方法，它返回包含地图的节点。然后你可以使用 jQuery 操作 DOM：

var mapNode = that.map.getDiv();
$('#destinationDiv').append(mapNode);

它只是将地图 div 移动到destinationDiv 中。我在 Chrome 和 Firefox 中对其进行了测试，效果很好，但我不确定它是否在所有主要浏览器中都能正常工作（如果地图的功能没有损坏）。

但我没有成功复制地图。使用 jQuery 的克隆方法会生成地图的损坏副本。如果您需要复制它，我想唯一的方法可能是创建全新的地图并从头开始创建所有对象。

【讨论】：

我在许多浏览器上测试了您的解决方案，它似乎有效！

【解决方案2】：

仅包含一个最近项目中使用此处介绍的解决方案的更完整的代码示例：

    // init map
    if(!$scope.map) {
      console.log("no $scope.map");

      if (!window.globalMap) {
        console.log("initializing new main map");
        window.globalMap = new google.maps.Map(document.getElementById('map'), mapOptions);
      }
      else {
        console.log("recycling map, with options:", mapOptions);
        var mapNode = window.globalMap.getDiv();
        $('#map').append(mapNode);
        window.globalMap.setOptions(mapOptions);
        google.maps.event.trigger(globalMap, "resize");
      }

      $scope.map = window.globalMap;
    }

【讨论】：