javascript - onclick 移动谷歌地图中心点

Question

我已经初始化了 Google map load 功能，并且工作正常。还有多个带有簇的标记。我没有在这里放置标记和簇代码。这些是标准代码。我的代码:

jQuery(document).ready(function(){
    initialize();
});

function initialize() {
    var center = new google.maps.LatLng(59.875405, 10.842099);
    var zoom = 10;
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: zoom,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
function mapAnimate(){
    var map = google.maps.Map(document.getElementById("map-canvas"));
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        window.setTimeout(function() {
            map.panTo(new google.maps.LatLng(58.9633, 5.7189));
        }, 500);
    });
}

然后我想将 map 移动到另一个中心位置而不重新生成 map 。有一个调用函数 mapAnimate() 的链接。

HTML:

<a href="javascript:void(0);" onclick="mapAnimate()">test</a>

但是它不起作用。我收到这样的错误:

TypeError: c[Eb] is not a function......

实际上我没有得到 map 实例。

Answer 1

在函数外部声明您的 map 变量。这应该可以解决问题。

jQuery(document).ready(function(){
    initialize();
});

var map;

function initialize() {
    var center = new google.maps.LatLng(59.875405, 10.842099);
    var zoom = 10;
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: zoom,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
function mapAnimate(){

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        window.setTimeout(function() {
            map.panTo(new google.maps.LatLng(58.9633, 5.7189));
        }, 500);
    });
}

但是，如果您从点击事件调用 mapAnimate() 函数，我不明白为什么您需要在 map 对象上使用该监听器。