2012-05-12 5 views
1

Я нашел различные решения для включения/отключения KmlLayers с помощью JavaScript. Все сценарии, которые я видел, требуют отдельных функций для каждого уровня, но я хочу иметь только одну функцию для всех слоев, поэтому при добавлении нового слоя на мою веб-страницу мне не нужно редактировать существующий код JavaScript.API JS API Google с контролем уровня KML

Мой код:

<!DOCTYPE html> 
<html><head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<style type="text/css"> 
    * {margin:0; padding:0; border:0; outline:0; font-size:100%; 
     vertical-align:baseline} 
    html, body {width:100%; height:100%} 
    #map {width:100%; height:95%} 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false&language=lv"> 
</script> 

<script type="text/javascript"> 
    var G = google.maps; var kml = null; var show = false; 

    function toggle() { 
     var tr = this.rel; 
     if (!tr) { 
      tr = new G.KmlLayer('http://www.eiranet.lv/kartes/Anjo/kmz/' + 
       this.id + '.kmz', {preserveViewport:true}) 
     }; 
     show = !show; 
     if (show) { 
      tr.setMap(map) 
     } 
     else { 
      tr.setMap(null) 
     }; 
    }; 

    function initialize() { 
     var layers = document.getElementsByTagName('input'); 
     var options = { 
      center: new G.LatLng(34.9, 137.3), 
      zoom: 10, 
      mapTypeId: G.MapTypeId.TERRAIN, 
      scaleControl: true, 
      overviewMapControl: true, 
      mapTypeControlOptions: { 
       style:G.MapTypeControlStyle.DROPDOWN_MENU } 
     }; 

     map = new G.Map(document.getElementById('map'), options); 

     for (var i=0; i<layers.length; i++) { 
      layers[i].type = 'checkbox'; 
      G.event.addDomListener(layers[i], 'click', toggle) 
     }; 
    }; 

    G.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
<div id="map"></div> 
<input id="Didzis_21.03-03.04" rel="d1"/> 
<input id="Didzis_04.04-17.04" rel="d2"/> 
<input id="Didzis_18.04-01.05" rel="d3"/> 
<input id="Didzis_02.05-15.05" rel="d4"/> 
</body></html> 

Вот моя проблема: на самом деле я могу переключить несколько слоев на но я не могу их отключить. Я думаю, что весь код хорош, кроме функции toggle(). Кроме того, было бы хорошо, если бы атрибуты rel были бы не нужны, а только «id».

ответ

1

Похоже, что каждый KmlLayer, который вы создаете, становится сиротой; они назначаются функции local var с именем tr, но затем никогда не привязаны ни к чему, что останется доступным для нескольких вызовов до toggle(). Я предлагаю некоторые изменения в функции toggle():

function toggle() { 
    if (!this.kmlLayer) { 
     this.kmlLayer = new G.KmlLayer(
      'http://www.eiranet.lv/kartes/Anjo/kmz/' + this.id + '.kmz', 
      { preserveViewport:true }); 
    } 
    show = !show; 
    if (show) { 
     this.kmlLayer.setMap(map) 
    } 
    else { 
     this.kmlLayer.setMap(null) 
    }; 
}; 

После просмотра страницы более подробно, я предлагаю дополнительные изменения:

function toggle() { 
    if (!this.kmlLayer) { 
     this.kmlLayer = new G.KmlLayer(
      'http://www.eiranet.lv/kartes/Anjo/kmz/' + this.id + '.kmz', 
      { preserveViewport:true }); 
     this.displayIsOn = false; 
    } 
    //show = !show; -- Remove this line, it is causing display state problems 
    if (this.displayIsOn) { 
     this.kmlLayer.setMap(null); 
     this.displayIsOn = false; 
    } 
    else { 
     this.kmlLayer.setMap(map); 
     this.displayIsOn = true; 
    }; 
}; 
+0

Спасибо за ответ. Теперь он работает лучше, можно включать и выключать одиночные слои, но манипулировать несколькими слоями остается сложным. Вы можете проверить эту страницу здесь: http: //www.eiranet.lv/kartes/Anjo/kmz/karte.html –

+0

Сделал некоторые изменения, просмотрев вашу страницу. См. Код выше. –

+0

Perfect :) Я также нашел о geoxml3 http://code.google.com/p/geoxml3/, с помощью этого скрипта вы можете использовать наложения непосредственно с компьютера, не отправляя их в Google, чтобы он дал лучшую производительность. –