Есть ли простой способ настроить флажки для переключения (включения/выключения) слоев KML для Google Maps v3? Я встретил thesearticles, но ни один из них не работал для меня.Переключить слои KML в Google Maps v3
3
A
ответ
7
К сожалению моя статья не работает для вас, это немного устарел.
Вот полный пример типичного переключателя Gmaps при условии, что вы используете файлы kml.
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
// lets define some vars to make things easier later
var kml = {
a: {
name: "MPLS/STPL",
url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
},
b: {
name: "Bicycling Tour Routes",
url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
}
// keep adding more if ye like
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(44.9812, -93.2687),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
createTogglers();
};
google.maps.event.addDomListener(window, 'load', initializeMap);
// the important function... kml[id].xxxxx refers back to the top
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
suppressInfoWindows: true
});
// store kml as obj
kml[id].obj = layer;
kml[id].obj.setMap(map);
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
// create the controls dynamically because it's easier, really
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
kml[prop].name + "<\/li>";
}
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
// easy way to remove all objects
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
// Append Class on Select
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
function startup() {
// for example, this toggles kml b on load and updates the menu selector
var checkit = document.getElementById('b');
checkit.checked = true;
toggleKML(checkit, 'b');
highlight(checkit, 'selector1');
}
</script>
<style type="text/css">
.selected { font-weight: bold; }
</style>
</head>
<body onload="startup()">
<div id="map_canvas" style="width: 100%; height: 600px;"></div>
<div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "></div>
</body>
</html>
Это чистый js, поэтому, используя jQuery, вы можете сделать что-то немного проще. Надеюсь это поможет!
3
Для переключая Kml слоя вы можете попробовать эту функцию:
/** Toggles layer
* @param {google.maps.KmlLayer} layer
* @param {google.maps.Map} map
**/
function toggleLayer(layer, map){
layer.setMap(layer.getMap() ? null : map);
}
Храните слои в массиве для дальних действий (например, переключая).
Затем вы можете переключить слой по его индексу в этом массиве:
toggleLayer(layersArray[index], map);
Или применить переключая ко всем слоям:
for(var index = 0; index < layersArray.length; ++index){
toggleLayer(layersArray[index], map);
}
Смежные вопросы
- 1. Переключить несколько слоев KML/KML в google maps API v3
- 2. Правильно отображать kml в google maps v3?
- 3. KML Слои визуализации заказа Google Maps
- 4. kml + google maps api v3 + geoxml3
- 5. Недостаток KML в Google maps
- 6. Как инициализировать слои Google Maps
- 7. API Google Maps Engine - слои KML Препятствие новым маркерам Событие
- 8. Google Maps KML Validation
- 9. google maps kml
- 10. Динамические kml google maps
- 11. Google maps KML polygons
- 12. KML to google maps
- 13. Переключить наложение KML для API Google Maps v3 с помощью флажка
- 14. Ошибка Google Maps Api v3
- 15. Google Maps API V3 Уровень KML не отображается
- 16. любые средства создания KML строку для Google-Maps-v3
- 17. google maps api v3 экспорт kml файла текущей карты
- 18. передача KML в Google Maps
- 19. Google Maps переключить слой трогании
- 20. Динамическое обращение к kml в API Google Планета Земля для Google Maps v3
- 21. Google Maps Количество пределов слоев KML
- 22. Google Maps V3 API и MarkerManager - Как переключить выбранные маркеры?
- 23. элементов игнорируются google maps KML
- 24. Google Maps Kml layer Zoom
- 25. iPhone Google Maps KML Поиск
- 26. Google maps api v3: содержимое infowindow неуместно
- 27. Обновление данных KML в Картах Google V3
- 28. google maps v3 requestFullScreen
- 29. Google Maps v3 Shapes
- 30. Google Maps V3 зуммирования
работал отлично, но нажатие на слой не всплывает таблица атрибутов .. почему ?? – Zain
Вы имеете в виду инфунд? set suppressInfoWindows: true для false - я призываю людей читать документацию Google, на самом деле содержит все, что вам когда-либо нужно знать! https://developers.google.com/maps/documentation/javascript/3.exp/reference – efwjames