13zone
Профессор
- Регистрация
- 22 Ноя 2008
- Сообщения
- 203
- Реакции
- 45
- Автор темы
- #1
Есть генерация и вывод маркеров из базы данных, пробую сделать фильтр маркеров по категории, что-то не выходит, - может кто подскажет где ошибся? или сделать по нормальному.
Код:
<div id="buttons">
<input type="checkbox" name="filter" id="batarei" class='chk-btn'>
<label for='batarei'>Батарейки</label>
<input type="checkbox" name="filter" id="makulatura" class='chk-btn'>
<label for='makulatura'>Макулатура</label>
<input type="checkbox" name="filter" id="metallolom" class='chk-btn'>
<label for='metallolom'>Металлолом</label>
<br>
</div>
<script>
var filters = {batarei:false, metallolom:false, makulatura:false}
$(function () {
$('input[name=filter]').change(function (e) {
map_filter(this.id);
filter_markers()
});
})
var get_set_options = function() {
ret_array = []
for (option in filters) {
if (filters[option]) {
ret_array.push(option)
}
}
return ret_array;
}
var filter_markers = function() {
set_filters = get_set_options()
for (i = 0; i < markers.length; i++) {
markers = markers[i];
keep=true
for (opt=0; opt<set_filters.length; opt++) {
if (!markers.category[set_filters[opt]]) {
keep = false;
}
}
marker.setVisible(keep)
}
}
var map_filter = function(id_val) {
if (filters[id_val])
filters[id_val] = false
else
filters[id_val] = true
}
var icons = { // свои иконки для каждого типа обьекта
batarei: {
icon: 'batarei.png'
},
makulatura: {
icon: 'makulatura.png'
},
odejda: {
icon: 'odejda.png'
},
metallolom: {
icon: 'metallolom.png'
},
rtut: {
icon: 'mercury.png'
},
plastkr: {
icon: 'plastkr.png'
},
plastbut: {
icon: 'plastbut.png'
},
steklo: {
icon: 'steklo.png'
},
shina: {
icon: 'shina.png'
},
other: {
icon: 'other.png'
},
oil: {
icon: 'oil.png'
},
kirpich: {
icon: 'kirpich.png'
},
electronic: {
icon: 'electronic.png'
}
};
var map, trafficLayer;
var vis = false;
function refreshMap()
{
if (vis)
{
trafficLayer.setMap(null)
vis = false;
}
else
{
trafficLayer.setMap(map);
vis = true;
}
}
var markers = [];
var sity = [];
var marker1;
var infowincontent = [];
var mSelsity = document.querySelector( '#gorod' );
var mSelect = document.querySelector( '#markers' ); // выбор обьекта в поле
var textElement = document.querySelector( '#selected' );
var nono = <?php echo json_encode($abons); ?>; // массив со всеми данными из базы - nono[i][9] текст для балуна маркера
var locations = <?=$point; ?>; // координаты всех маркеров
function updateCoordinates( lat, lng ) {
document.getElementById( 'lat' ).value = lat;
document.getElementById( 'lng' ).value = lng;
}
function initMap() {
map = new google.maps.Map( document.getElementById( "map" ), {
center: new google.maps.LatLng( 49.988546, 36.233000 ), // центр в Харькове
zoom: 6,
zoomControl: true,
scrollwheel: false
} );
trafficLayer = new google.maps.TrafficLayer();
var infoWin = new google.maps.InfoWindow();
var markers = locations.map( function ( location, i ) {
var marker = new google.maps.Marker( {
position: location,
icon: {
url: nono[ i ][ 3 ] + '.png',
scaledSize: new google.maps.Size( 35, 35 )
}, // добавляем иконки маркера и сообщаем размеры
title: nono[ i ][ 4 ],
sity: nono[ i ][ 1 ],
category: nono[ i ][ 3 ]
} );
var text = nono[ i ][ 9 ];
var infowincontent = '<div id=""><input id="tab1" type="radio" name="tabs" checked hidden="true"><label for="tab1">Адрес</label><input id="tab2" type="radio" name="tabs" hidden="true"><label for="tab2">Описание</label><input id="tab3" type="radio" name="tabs" hidden="true"><label for="tab3">Фото</label><section id="content1"><b>Город: ' + nono[ i ][ 1 ] + '</b><br><b>Что принимают: </b><k style="color: red;">' + nono[ i ][ 4 ] + '</k><br><b>Адрес: </b>' + nono[ i ][ 5 ] + '</section><section id="content2"><b>Описание обьекта: </b>' + nono[ i ][ 9 ] + '</section><section id="content3"><img class=infoimage src=' + nono[ i ][ 8 ] + ' /></section></div>';
google.maps.event.addListener( marker, 'click', function ( evt ) {
infoWin.close();
infoWin.setContent( infowincontent );
map.panTo( marker.getPosition(), 100 );
infoWin.open( map, marker );
textElement.innerHTML = infowincontent || posii;
} )
return marker;
setInterval( function () {
markers[ 0 ].setPosition( new google.maps.LatLng( markers[ 0 ].getPosition().lat() + Math.random() * 0.0002 - 0.0001, markers[ 0 ].getPosition().lng() + 0.0001 ) );
}, 100 );
setInterval( function () {
if ( map.getBounds().contains( markers[ 0 ].getPosition() ) ) {
map.panTo( markers[ 0 ].getPosition() );
}
}, 5000 );
} );
var infoWindow = new google.maps.InfoWindow( {
map: map
} );
var markerCluster = new MarkerClusterer( map, markers, {
imagePath: window.location.protocol + "//" + window.location.host + "/" + 'images/m',
gridSize: 90
} );
</script>