切换Google地图标记 [英] Toggle Google Maps markers
问题描述
我从另一篇文章中抽取了一些代码来启动我,但试图让它做我需要的。我需要设置函数来显示/隐藏标记,当它们被检查时,还可以为标记类别分配合适的图标,例如Walk,Fish。
首先,我需要以获得显示隐藏功能,目前没有。
你可以在这里找到一个演示... http://jsfiddle.net/huMtu/
问题在于 locations
变量是一个信息数组 - 它实际上并不是Google Map上的标记 - 这意味着您不能调用方法 setVisible()
就可以了。
你需要做的是将每个标记存储在一个单独的数组中,然后调用 setVisible
针对这个新数组元素的方法....我更新了JSFiddle - > http://jsfiddle.net/huMtu/1/
这里是JS部分:
var markers = new Array(); //用于存储谷歌标记
var locations = [
['Bondi Beach','有些文本会出现在这里< br />文本','Walk',-33.890542,151.274856,4] ,
['Coogee Beach','一些文字转到这里< br />文字','Fish',-33.923036,151.259052,5],
['Cronulla Beach','Some text goes这里< br />文字','鱼',-34.028249,151.157507,3],
['曼利海滩','一些文字在这里< br />文字','走',-33.80010128657071 ,151.28747820854187,2],
['Maroubra Beach','一些文字在这里< br />文字','Walk',-33.950198,151.259302,1]
];
var map = new google.maps.Map(document.getElementById('map'),{
zoom:10,
center:new google.maps.LatLng( - 33.92,151.25),
mapTypeId:google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker,i;
(i = 0; i< locations.length; i ++){
marker = new google.maps.Marker({
position:new google.maps.LatLng (位置[i] [3],位置[i] [4]),
map:map
});
markers.push(marker); //将当前标记添加到数组以供后续处理
google.maps.event.addListener(marker,'click',(function(marker,i){
return function() [location] [i] [2] +< br />+ locations [i] [1] {
infowindow.setContent(locations [i] [0] +< );
infowindow.open(map,marker);
}
})(marker,i));
}
// ==显示特定类别的所有标记,并确保复选框被选中==
function show(category){
for(var (位置[i] [2] ==类别){
markers [i] .setVisible(true); //调用marker的setVisible方法
}
}
}
// ==隐藏特定类别的所有标记,并确保复选框被清除==
function hide(category){
for(var i = 0; i< locations.length; i ++){
if(locations [i] [2] == category){
markers [i] .setVisible(false); //调用marker的setVisible方法
}
}
}
// ==显示或隐藏最初的类别==
show( 步行);
hide(Fish);
工作小提琴(使用公开可用的图标)
I taken some code form another post to start me off but trying to get it to do what I need. I need to set up functions to show/hide markers when they are checked and also to assign appropriate icons to the marker categories ie, Walk, Fish.
To start I need to get the show hide functions to work which currently aren't.
You can find a demo here...http://jsfiddle.net/huMtu/
The problem you have is that the locations
variable is an array of information - its not actually the marker on the Google Map - that means that you cannot call the method setVisible()
on it....
What you need to do is store each of the markers in a separate array then call the setVisible
method against the element of this new array .... I have updated the JSFiddle -> http://jsfiddle.net/huMtu/1/
here is the JS part :
var markers = new Array(); // Used to store the google markers
var locations = [
['Bondi Beach', 'Some text goes here<br />text', 'Walk', -33.890542, 151.274856, 4],
['Coogee Beach', 'Some text goes here<br />text', 'Fish', -33.923036, 151.259052, 5],
['Cronulla Beach', 'Some text goes here<br />text', 'Fish', -34.028249, 151.157507, 3],
['Manly Beach', 'Some text goes here<br />text', 'Walk', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', 'Some text goes here<br />text', 'Walk', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map
});
markers.push(marker); // Add the current marker to the array for later processing
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true); // call the setVisible method of the marker
}
}
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false); // call the setVisible method of the marker
}
}
}
// == show or hide the categories initially ==
show("Walk");
hide("Fish");
working fiddle (with publicly available icons)
这篇关于切换Google地图标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!