如何在地图上点击多个标记?

时间:2013-08-03 06:08:19

标签: javascript html css google-maps

我正在尝试在Google地图上放置多个可点击标记,但在找到方法时遇到了问题。在线代码示例都是指保存数据的数组,但我想要做的就是让地图放大到被点击的数据。

位置数据由whilepress循环中的wordpress填充,以便帖子可以自动将新位置添加到全局地图。

很简单,但是我的代码只适用于最后一个代码。我做错了吗?

<script type="text/javascript">
function initialize() {
    google.maps.visualRefresh = true;
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024,-95.712891),
        disableDefaultUI: true,
    };

    var posts = locationLat.length;
    var j = 0;
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    var place = new Array();

        while (posts != j)
        {
            var image = '<?php echo get_template_directory_uri(); ?>/location_marker.png';
            var myLatLng = new google.maps.LatLng(locationLat[j],locationLong[j]);

            place[j] = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });   

            google.maps.event.addListener(place[j], 'click', function() {
            map.setZoom(8);
            map.setCenter(myLatLng);

            $('.sidebar').stop().animate({
                'width' : '400px',
                'opacity' : '1'
            }, 500);
            });
            j++;
        }
}


google.maps.event.addDomListener(window, 'load', initialize);
</script> 

真的不确定,因为在线的所有其他示例都没有真正做到这一点。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:1)

试试这个:

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
}); 
google.maps.event.addListener(marker, 'click', function() {
   map.setZoom(8);
   map.setCenter(marker.getPosition());
});

答案 1 :(得分:0)

啊,找到了我要找的东西:

map.panTo(this.getPosition());

这似乎完美无缺。