切换Google地图的内部切换

时间:2013-07-10 22:09:59

标签: google-maps google-maps-api-3 toggle google-maps-markers

我制作了一张Google地图,用一个标记在开头显示了一个位置。 从那里你可以切换位置。然后它将显示带有1个标记的新位置。

除了位置切换之外,还可以为两个主要位置中的每一个选择子位置。

我认为制作2个vars(每个位置1)将是最好的[例子]:

var locationsBerlin = [
    ['Berlin 1', 52.519433,13.406746, 1],
    ['Berlin 2', 52.522606,13.40366, 2],
    ['Berlin 3', 52.52113,13.409411, 3],
    ['Berlin 4', 52.517043,13.402394, 4],
    ['Berlin 5', 52.51703,13.412801, 5],
    ['Berlin 6', 52.525086,13.399798, 6],
    ['Berlin 7', 52.525151,13.410741, 7]
];

这是我选择“主要”位置的方式。

markerMain = new google.maps.Marker({
        position: new google.maps.LatLng(locationsBerlin[0][1], locationsBerlin[0][2]),
        map: map,
        icon: customPin
    });

数组的其余部分是sublocations。现在我希望用户能够按下链接并显示var中的其余位置(位置数量将是动态的)。

所以我尝试创建一个在单击切换链接后调用的函数。

function subLocationBerlin(){
    alert("berlin sub");
    for (i = 1; i < locationsBerlin.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locationsBerlin[i][1], locationsBerlin[i][2]),
            map: map
        });
        markers.push(marker);
    }
}

但现在我被卡住了。出于某种原因,它没有在地图上添加额外的标记,我不知道出了什么问题。

在这里你可以找到小提琴: http://jsfiddle.net/gvMSX/3/

1 个答案:

答案 0 :(得分:0)

您的地图变量(初始化并显示地图的变量)是初始化函数的本地变量:

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

从前面删除“var”以初始化全局版本。

另请注意,javascript数组基于0,当您在for循环中将i初始化为1时,您将缺少第一个标记

function subLocationBerlin(){
    console.log('Berlin Sub Called');
    for (i = 1; i < locationsBerlin.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locationsBerlin[i][1], locationsBerlin[i][2]),
            map: map
        });
        markers.push(marker);
        console.log(marker);
    }
}