克隆谷歌地图实例

Question

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

是否有一种方法可以将我创建在一个div中的google地图实例复制到另一个div中？

或者其他解决方法，比如更改与地图相关联的div... 科幻小说吗？

- Francesco

Answer 1

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

虽然移动地图似乎很简单。该地图有一个getDiv方法，返回包含地图的节点。使用jQuery，您可以操纵DOM：

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

它简单地将地图div移动到destinationDiv中。我在Chrome和Firefox中测试过，运行良好，但我不确定它是否在所有主流浏览器中正常工作（如果地图功能没有被破坏）。

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

- Tomik

---

我在许多浏览器上测试了你的解决方案，看起来它能够正常工作！ - Francesco

Answer 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;
    }

- Kyle Baker