为Google地图切换内部切换 [英] Toggle inside toggle for Google Maps

问题描述

我制作了Google地图，以1个标记开头显示位置。
从那里您可以切换位置。然后它将显示新的位置，并带有1个标记。

除了位置切换之外，还可以为2个主要位置中的每个位置选择子位置。 b
$ b

我认为制作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]，
 [柏林6'，52.525086,13.399798,6]，
 ['柏林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 
}）; 
  

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

所以我尝试了（b）
$ b

  function subLocationBerlin（）{
 alert（柏林子）; 
 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/

<$ p

你的map变量（初始化并显示地图的变量）是局部于初始化函数的：

  var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
  

删除前面的var以初始化全局版本。

还要注意的是，javascript数组是基于0的，当你在for循环中初始化为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）; 
} 
} 
  

I've made a Google Map that show a location at the beginning with 1 marker. From there you have the possibility to switch location. It will then show the new location with 1 marker.

Aside from the location switching it's possible to select sub locations for each of the 2 main locations.

I thought that making 2 vars ( for each location 1) would be the best thing [example]:

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]
];

This is how I select the "main" location.

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

The rest of the array are sublocations. Now I want the user to be able to press a link and show the rest of the locations in the var (the amount of locations will be dynamic).

So I tried to make a function that will be called after clicking the toggle link.

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);
    }
}

But now I'm stuck. For some reason it's not adding the extra markers to the map and I don't know what's wrong.

Over here you can find the fiddle: http://jsfiddle.net/gvMSX/3/

解决方案

Your map variable (the one that is initialized and is displaying the map) is local to the initialize function:

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

Remove the "var" from in front of it to initialize the global version.

Note also that javascript arrays are 0 based, you will be missing the first marker when you initialize i to 1 in your for loops

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);
    }
}

这篇关于为Google地图切换内部切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！