问题描述
我制作了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);
}
}
但现在我被卡住了。出于某种原因,它不会将额外的标记添加到地图中,我不知道有什么问题。
在这里您可以找到小提琴:
<$ 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地图切换内部切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!