javascript - 重新初始化 gmap3 地图

Question

是否可以将 gmap3 地图重新初始化为其默认设置（纬度、经度、缩放等）？

我尝试在地图上销毁，然后重新运行初始化，但它不起作用。

在这里查看我的 jsfiddle - http://jsfiddle.net/vlowe/z9dDE/1/

Answer 1

将地图元素包裹在容器 div 中，然后当您要重置地图时，只需删除整个地图 div 并重新创建它。这应该可以解决问题。

根据 gmap3 文档，您仍然需要在删除 dom 元素之前在地图上调用 destroy。

HTML 代码

<div>
    <div id="map"></div>
</div>

<a href="#" onclick="restore();">restore</a>​

JavaScript

var dlat = 53.9783997; // default map latitude
var dlng = -1.5666347; // default map longitude
var dzoom = 6; // default map zoom
var dmaptype = "roadmap"; // default map type
// create gmap
$('#map').gmap3({
    action: 'init',
    options: {
        center: [dlat, dlng],
        zoom: dzoom,
        mapTypeId: dmaptype,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        streetViewControl: true
    }
});


function restore() {

    $('#map').gmap3({
        action: 'destroy'
    });

    var container = $('#map').parent();
    $('#map').remove();
    container.append('<div id="map"></div>');

    // create new gmap
    $('#map').gmap3({
        action: 'init',
        options: {
            center: [dlat, dlng],
            zoom: dzoom,
            mapTypeId: dmaptype,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        }
    });

}​

Answer 2

这是另一种方法：与其破坏地图并完全重新创建它，您可以保存初始状态并将其恢复到该状态，如下所示：http: //jsfiddle.net/UvAL3/1/

（这些函数在 V2 中作为 API 的一部分存在）