移动谷歌地图中心点点击

时间:2014-03-26 12:58:37

标签: javascript jquery google-maps google-maps-api-3

我初始化了Google地图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);
    });
}

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

HTML:

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

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

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

实际上我没有得到地图实例。

1 个答案:

答案 0 :(得分:3)

在函数之外声明您的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()函数,我就不明白为什么您需要在地图对象上使用该侦听器。