Naveen Neelam Ответов: 1

Как я могу показать или скрыть маркеры на картах Google с помощью наложений?


В моем коде состоит из более чем 90 маркеров, при нажатии на каждый маркер будет открыто одно изображение на основе информационного окна еще этот код был завершен,но мое требование состоит в том, чтобы поместить элемент управления checkBox на google maps, когда я проверяю флажок все маркеры видны, снимите флажок все маркеры невидимы с помощью концепции наложений. Пожалуйста, дайте мне какое-нибудь представление о маркерах show/hide?
ниже мой код состоит из маркеров








Варе карте;
маркеры var=[];

функция initmap() {
map = new google. maps. Map(document. getElementById ("dvMap"), {
зум: 7,
центр: { lat: 4.542500, lng: 101.140999 },
mapTypeId: google. maps.MapTypeId.ДОРОЖНАЯ КАРТА,
streetViewControl: false
});


функция CenterControl(controlDiv, map) {


// Установите CSS для контрольной границы.
var controlUI = document. createElement ('div');
controlUI.стиль.свойство backgroundColor = '#FFF в';
controlUI.стиль.границы = '2 пикселя твердых #ФФФ';
controlUI.стиль.borderRadius = '3 пиксела';
controlUI.стиль.paddingLeft = '5 пикселей';

controlUI.стиль.boxShadow = '0 6px 2 пикселя формата RGBA(0,0,0,.3)';
controlUI.стиль.указатель курсора ='';
controlUI.стиль.marginBottom = '22px';
controlUI.стиль.центр для textalign ='';


controlUI.название = 'маркеры';
controlDiv. appendChild(controlUI);
var controlText = document. createElement ('div');
controlText.стиль.цвет = 'в формате RGB(25,25,25)';
controlText.стиль.объекта FontFamily = 'робото,Arial,без serif';
controlText.стиль.свойство FontSize = '12px';
controlText.стиль.lineHeight = '26px';
controlText.стиль.paddingLeft = '5 пикселей';
controlText.стиль.paddingRight = '5 пикселей';

controlUI. appendChild(controlText);

var checkbox = document. createElement ('input');
галку.флажок тип = "";
checkbox.name = " имя";
checkbox. value = " значение";
checkbox.id = " chkimages";
//флажок.проверено = истина;

метки ВАР = документ.метод createElement('метка')
label.htmlFor = " lblimg";
label.appendChild(document.createTextNode ('маркеры'));
controlUI. appendChild (флажок);
controlUI. appendChild(метка);
}

$(документ).готово(функция () {

$.Аякс({
тип: "пост",
contentType: "application/json; charset=utf-8",
url: "QMapImages. aspx/GetCctvData",
данные: "{}",
тип данных: "json",
успех: функция (данные) {
for (var j = 0; j & lt; data.d. length; j++) {
var маркер = {
название: сведения.д[Дж].Название,
широта: сведения.д[Дж].Широта,
: данные по производству СПГ.д[Дж].СПГ,
код: данных.д[Дж].Идентификатор
};
маркеры. push (маркер);

}
маркеры = JSON. parse(маркеры);
},
ошибка: функция (результат) {
предупреждение(данные.д[Я].Название);
}
});

setTimeout(checkboxcheck, 1000);
функция checkboxcheck() {
$('input[type= "checkbox"]'). click (функция () {
если ($(это).опора("проверено") == истина) {
setMapOnAll(карта);
}
остальное, если ($(это).опора("проверено") == ложь) {
маркера = [];

}
});
}
функция setMapOnAll(карта) {
var infoWindow = новый google. maps.InfoWindow();
для (ВАР я = 0; я &амп;ЛТ; маркеры.длина; я++) {

var data = маркеры[i];
var myLatlng = новый google. maps.Latlng С(данные.широта, сведения.СПГ);
var marker = новый google. maps.Маркер({
должность: myLatlng,
карта: карта,
название: сведения.название,
значок: 'http://plustrafik.plus.com.my/images/LiveTrafficPage/16 x 16 / CCTV. png'
});
// Прикрепите событие щелчка к маркеру.
(функция (маркер, данные) {
Гугл.карты.событие.метод addlistener(маркер, "клик", функция (е) {
// Оберните содержимое внутри HTML-DIV, чтобы установить высоту и ширину InfoWindow.
infoWindow.setContent("&ЛТ;ширина div стиль=': 280px;высота:220px; в'>" + "&амп;ЛТ;ИМГ СРЦ=GettingImages.аспн?идентификатор=" + данные.ИД + "&ГТ;" + "&ЛТ;/дел&ГТ;");
infoWindow. open(карта, маркер);
});
}) (маркер, данные);
}
}

});


ВАР centerControlDiv = документ.метод createElement('див');
var centerControl = новый CenterControl(centerControlDiv, map);

centerControlDiv. index = 1;
карте.регулирование[Гугл.карты.Контрольная позиция.LEFT_TOP]. push(centerControlDiv);
centerControlDiv. style ['padding-left'] = '10px';
}




Что я уже пробовал:

Пожалуйста, дайте мне какое-нибудь решение для этого примера?

1 Ответов

Рейтинг:
0

Peter Leow

В событии onchange флажка выполните цикл по массиву маркеров, и если флажок установлен, то

markers.setMap(map)

чтобы показать все маркеры, иначе
markers.setMap(null)

чтобы скрыть все маркеры.
Фрагменты кода выглядят следующим образом:
формат HTML:
<input type="checkbox" id="toggleMarkers" onChange="toggleMarker()" checked>Toggle Markers

Функция JS:
function toggleMarker(){
	if (document.getElementById("toggleMarkers").checked)
		show = map;
	else
	    show = null;
	for (var i = 0; i < markers.length; i++) {
		markers[i].setMap(show);
	}
}

Я вижу, что вы используете jQuery, тогда у вас не должно быть никаких проблем с его модификацией, чтобы использовать селектор jQuery.


Naveen Neelam

В моем коде показ setMap является ошибкой

Peter Leow

Вы должны проверить документацию и выяснить, что не так с вашей стороны https://developers.google.com/maps/documentation/javascript/markers

Naveen Neelam

Питер, это работает, спасибо, Яр....

Peter Leow

Добро пожаловать. Отметьте это как ответ.