javascript - 将谷歌地图复制到页面上单独的 元素

Question

我在一个页面上有一个谷歌地图。我正在使用以下代码行获取 map 并将其分配给新变量。

 newmap = map.getMap();

当我打印 newmap 到控制台时，它显示 map 正在分配给变量。我现在想将具有完全相同选项的 map 复制到以下 div ....

 <div id="map-larger-canvas"></div>

知道我该怎么做吗？

Answer 1

为每个 map 定义选项并在初始化两次之后:

var map_options = {
        center: new google.maps.LatLng(41.811729,12.738513),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

function initialize() {
    var map1 = document.getElementById('map-1st');
    var map_canvas = document.getElementById('map-larger-canvas');

    var map1 = new google.maps.Map(map1, map_options)
    var map2 = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);

我是这样使用Json的，看看:

$('#map_canvas_europe').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'json/locations_europe.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas_europe').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas_europe').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
});

$('#map_canvas_asia').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'json/locations_asia.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas_asia').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas_asia').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
});