Question

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

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

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

Answer 1

我不认为谷歌地图本身支持这种操纵。

虽然看起来移动地图非常简单。地图有一个方法getDiv，它返回包含地图的Node。然后使用jQuery操作DOM：

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

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

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

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

克隆谷歌地图实例

2 个答案: