1. 首頁
  2. 問答
  3. 隱藏/顯示在谷歌地圖的一些標有geoxml3

隱藏/顯示在谷歌地圖的一些標有geoxml3

2014-12-02 59 views
0

我加載地圖與三層：隱藏/顯示在谷歌地圖的一些標有geoxml3

var myOptions = { 
    center: new google.maps.LatLng(36.82907321372808, -4.46044921875), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
var geoXml = new geoXML3.parser({ 
    map: map, 
    singleInfoWindow: false, 
    afterParse: useTheData 
}); 

geoXml.parse('data/file1.kml'); 
geoXml.parse('data/file2.kml'); 
geoXml.parse('data/file3.kml');

誰，我可以隱藏一些不標我已經隱藏所有的層？我在KML中添加了一些額外的信息來檢測我必須隱藏的所有點/ poligons，但我不知道它是否是最好的工作方式。雖然它的確定，我怎麼能檢測的KML該標籤使用例如geoXml.docs[1].markers[xx].setVisible(false);（在我的情況，我想隱藏在那裏"Codigo"-tag='PRA-239'）

file2.kml

<?xml version='1.0' encoding='UTF-8' ?> 
<kml> 
    <Document> 
     <Style id='Ruta_PRA'> 
      <LineStyle> 
       <color> 
        FF0FC4F1 
       </color> 
       <width> 
        3 
       </width> 
      </LineStyle> 
      <IconStyle> 
       <color> 
        ff00ff00 
       </color> 
       <colorMode> 
        random 
       </colorMode> 
       <scale> 
        1 
       </scale> 
       <Icon> 
        <href> 
         http://webclientes/static/url_web/img/ico0FC4F1.png 
        </href> 
       </Icon> 
      </IconStyle> 
     </Style> 
     <Placemark> 
      <name> 
      </name> 
      <description> 
       <![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa1' title='PR-A 239 Algatocín – Benarrabá'>PR-A 239 Algatocín – Benarrabá</a></div>]]> 
      </description> 
      <Codigo> 
       PRA-239 
      </Codigo> 
      <Point> 
       <coordinates> 
        -5.28165881693292,36.5697241462153 
       </coordinates> 
      </Point> 
      <styleUrl> 
       #Ruta_PRA 
      </styleUrl> 
     </Placemark> 
     <Placemark> 
      <name> 
      </name> 
      <description> 
       <![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa2' title='PR-A 267 Pico del Vilo'>PR-A 267 Pico del Vilo</a></div>]]> 
      </description> 
      <Codigo> 
       PRA-267 
      </Codigo> 
      <Point> 
       <coordinates> 
        -4.25874817605722,36.9917987986663 
       </coordinates> 
      </Point> 
      <styleUrl> 
       #Ruta_PRA 
      </styleUrl> 
     </Placemark> 
     <Placemark> 
      <name> 
      </name> 
      <description> 
       <![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/gransenda/es/etapas3' title='PR-A 239 Los Nacimientillos – Las Pilas'>PR-A 239 Los Nacimientillos – Las Pilas</a></div>]]> 
      </description> 
      <Codigo> 
       PRA-239 
      </Codigo> 
      <Point> 
       <coordinates> 
        -5.27479155176616,36.5748306219344 
       </coordinates> 
      </Point> 
      <styleUrl> 
       #Ruta_PRA 
      </styleUrl> 
     </Placemark> 
     <Placemark> 
      <name/> 
      <description> 
       <div style='line-height:1.35;overflow:hidden;white-space:nowrap;'> 
        <a href='http://webclientes/gransenda/es/etapa4' 
        title='PR-A 239 Estación de Benaoján - Jimera de Líbar'>PR-A 239 Estación de Benaoján - Jimera de Líbar</a> 
       </div> 
      </description> 
      <Codigo> 
       PRA-239 
      </Codigo> 
      <Snippet/> 
      <MultiGeometry> 
       <LineString> 
        <tessellate> 
         1 
        </tessellate> 
        <altitudeMode> 
         clampToGround 
        </altitudeMode> 
        <coordinates> 
         -5.246115,36.712255 -5.246242,36.711970 -5.245898,36.711291 -5.246101,36.710594 -5.246349,36.710255 -5.246487,36.710018 -5.246646,36.709709 -5.246632,36.709610 -5.246664,36.709555 -5.247046,36.708836 -5.247169,36.708446 -5.247158,36.708447 -5.247331,36.708245 -5.247536,36.707971 -5.247756,36.707849 -5.248103,36.707843 -5.248390,36.707684 -5.248586,36.707500 -5.249162,36.706931 -5.249552,36.706473 -5.249954,36.706059 -5.250237,36.705396 -5.250541,36.704687 -5.250748,36.704125 -5.251148,36.703234 -5.251524,36.702307 -5.251659,36.701944 -5.251694,36.701628 -5.251785,36.701284 -5.251692,36.701169 -5.252050,36.701153 -5.252483,36.700676 -5.252957,36.700397 -5.253486,36.700116 -5.253737,36.699904 -5.253765,36.699723 -5.253746,36.699435 -5.253754,36.698976 -5.253678,36.698662 -5.253574,36.698528 -5.253344,36.698334 -5.253048,36.698178 -5.252681,36.697869 -5.252312,36.697480 -5.252177,36.697068 -5.252196,36.696950 -5.252238,36.696499 -5.252412,36.695928 -5.253225,36.695407 -5.253622,36.695202 -5.253826,36.694900 -5.254006,36.694185 -5.254206,36.693740 -5.254406,36.693303 -5.254887,36.692537 -5.255040,36.692038 -5.255026,36.691561 -5.255367,36.691356 -5.255789,36.690861 -5.256510,36.690631 -5.257143,36.690466 -5.257749,36.690148 -5.257873,36.689794 -5.257743,36.689554 -5.257585,36.689106 -5.257587,36.688790 -5.257901,36.688442 -5.258015,36.688142 -5.258325,36.687641 -5.258517,36.687322 -5.258842,36.686946 -5.259048,36.686708 -5.259908,36.686277 -5.260423,36.685907 -5.261241,36.685567 -5.261831,36.685456 -5.262433,36.684985 -5.262624,36.684648 -5.262938,36.684291 -5.262693,36.683935 -5.262521,36.683803 -5.262475,36.683371 -5.262539,36.683253 -5.262595,36.683261 -5.263097,36.683603 -5.263492,36.682937 -5.264012,36.682350 -5.264624,36.681852 -5.265169,36.681382 -5.265862,36.680945 -5.266519,36.680464 -5.267414,36.679717 -5.268154,36.678991 -5.268156,36.678666 -5.268347,36.678320 -5.268315,36.677609 -5.268758,36.677087 -5.269847,36.676075 -5.270768,36.675426 -5.271303,36.674956 -5.272051,36.674140 -5.272673,36.673245 -5.273898,36.671887 -5.274522,36.671794 -5.274968,36.671389 -5.275326,36.670986 -5.275634,36.670800 -5.276111,36.669168 -5.276541,36.668574 -5.277033,36.667790 -5.277255,36.667371 -5.278421,36.666682 -5.278542,36.666625 -5.278771,36.666414 -5.279480,36.665796 -5.279685,36.665549 -5.279741,36.665142 -5.279989,36.664840 -5.280355,36.664734 -5.280331,36.664671 -5.280318,36.664608 -5.280300,36.664753 -5.280464,36.664642 -5.280645,36.664692 -5.280715,36.664060 -5.280889,36.663480 -5.280960,36.663253 -5.281333,36.662994 -5.281388,36.662200 -5.281294,36.661688 -5.281429,36.660946 -5.281451,36.660540 -5.281603,36.659654 -5.281627,36.659707 -5.281352,36.659460 -5.281043,36.658871 -5.280998,36.658458 -5.281028,36.658340 -5.280924,36.657873 -5.281009,36.657691 -5.281004,36.657529 -5.280969,36.657494 -5.280996,36.656898 -5.281252,36.656470 -5.281733,36.656100 -5.281901,36.655718 -5.282211,36.654829 -5.282163,36.654362 -5.282061,36.654327 -5.281499,36.654230 -5.280409,36.653287 -5.280104,36.653193 -5.279092,36.652239 -5.279082,36.652293 -5.278748,36.652354 -5.278670,36.652364 -5.278705,36.652400 -5.277976,36.651963 -5.276952,36.651739 -5.276605,36.651376 -5.276318,36.650751 -5.276110,36.650521 -5.275614,36.649989 -5.275233,36.649582 
        </coordinates> 
       </LineString> 
      </MultiGeometry> 
      <styleUrl> 
       #Ruta_PRA 
      </styleUrl> 
     </Placemark> 
     ... 
    </Document> 
</kml>

來源

2014-12-02 Andynedine

回答

1

可以添加自定義分析功能，將<Codigo>的內容作爲地標的屬性，用於按鈕點擊處理函數。

概念證明代碼片斷：

var geoXml; 
 
var map; 
 

 
function initialize() { 
 
var myOptions = { 
 
    center: new google.maps.LatLng(36.82907321372808, -4.46044921875), 
 
    zoom: 4, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}; 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    geoXml = new geoXML3.parser({ 
 
    map: map, 
 
    singleInfoWindow: false, 
 
    pmParseFn: parsePlacemark, 
 
    // afterParse: useTheData 
 
}); 
 
    geoXml.parseKmlString(file2kml); 
 

 
    google.maps.event.addDomListener(document.getElementById('toggle'), 'click', toggle); 
 

 
} 
 
// Custom placemark parse function 
 
function parsePlacemark (node, placemark) { 
 
     var tagNodes = node.getElementsByTagName('Codigo'); 
 
     var tag = null; 
 
     if (tagNodes && tagNodes.length && (tagNodes.length > 0)) { 
 
     placemark.tag = geoXML3.nodeValue(tagNodes[0]); 
 
     } 
 
} 
 

 
function toggle() { 
 
    var tag = document.getElementById('tag').value; 
 
    for (var i=0; i < geoXml.docs[0].placemarks.length; i++) { 
 
     if (geoXml.docs[0].placemarks[i].tag == tag) 
 
      if (geoXml.docs[0].placemarks[i].marker.getMap() == null) { 
 
       geoXml.docs[0].placemarks[i].marker.setMap(map); 
 
      } else { 
 
       geoXml.docs[0].placemarks[i].marker.setMap(null); 
 
      } 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
var file2kml = "<?xml version='1.0' encoding='UTF-8' ?><kml><Document><Style id='Ruta_PRA'><LineStyle><color>FF0FC4F1</color><width>3</width></LineStyle><IconStyle><color>ff00ff00</color><colorMode>random</colorMode><scale>1</scale></IconStyle></Style><Placemark><name></name><description><![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa1' title='PR-A 239 Algatocín – Benarrabá'>PR-A 239 Algatocín – Benarrabá</a></div>]]></description><Codigo>PRA-239</Codigo><Point><coordinates>-5.28165881693292,36.5697241462153</coordinates></Point><styleUrl>#Ruta_PRA</styleUrl></Placemark><Placemark><name></name><description><![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa2' title='PR-A 267 Pico del Vilo'>PR-A 267 Pico del Vilo</a></div>]]></description><Codigo>PRA-267</Codigo><Point><coordinates>-4.25874817605722,36.9917987986663</coordinates></Point><styleUrl>#Ruta_PRA</styleUrl></Placemark><Placemark><name></name><description><![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/gransenda/es/etapas3' title='PR-A 239 Los Nacimientillos – Las Pilas'>PR-A 239 Los Nacimientillos – Las Pilas</a></div>]]></description><Codigo>PRA-239</Codigo><Point><coordinates>-5.27479155176616,36.5748306219344</coordinates></Point><styleUrl>#Ruta_PRA</styleUrl></Placemark><Placemark><name/><description><div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/gransenda/es/etapa4'title='PR-A 239 Estación de Benaoján - Jimera de Líbar'>PR-A 239 Estación de Benaoján - Jimera de Líbar</a></div></description><Codigo>PRA-239</Codigo><Snippet/><MultiGeometry><LineString><tessellate>1</tessellate><altitudeMode>clampToGround</altitudeMode><coordinates>-5.246115,36.712255 -5.246242,36.711970 -5.245898,36.711291 -5.246101,36.710594 -5.246349,36.710255 -5.246487,36.710018 -5.246646,36.709709 -5.246632,36.709610 -5.246664,36.709555 -5.247046,36.708836 -5.247169,36.708446 -5.247158,36.708447 -5.247331,36.708245 -5.247536,36.707971 -5.247756,36.707849 -5.248103,36.707843 -5.248390,36.707684 -5.248586,36.707500 -5.249162,36.706931 -5.249552,36.706473 -5.249954,36.706059 -5.250237,36.705396 -5.250541,36.704687 -5.250748,36.704125 -5.251148,36.703234 -5.251524,36.702307 -5.251659,36.701944 -5.251694,36.701628 -5.251785,36.701284 -5.251692,36.701169 -5.252050,36.701153 -5.252483,36.700676 -5.252957,36.700397 -5.253486,36.700116 -5.253737,36.699904 -5.253765,36.699723 -5.253746,36.699435 -5.253754,36.698976 -5.253678,36.698662 -5.253574,36.698528 -5.253344,36.698334 -5.253048,36.698178 -5.252681,36.697869 -5.252312,36.697480 -5.252177,36.697068 -5.252196,36.696950 -5.252238,36.696499 -5.252412,36.695928 -5.253225,36.695407 -5.253622,36.695202 -5.253826,36.694900 -5.254006,36.694185 -5.254206,36.693740 -5.254406,36.693303 -5.254887,36.692537 -5.255040,36.692038 -5.255026,36.691561 -5.255367,36.691356 -5.255789,36.690861 -5.256510,36.690631 -5.257143,36.690466 -5.257749,36.690148 -5.257873,36.689794 -5.257743,36.689554 -5.257585,36.689106 -5.257587,36.688790 -5.257901,36.688442 -5.258015,36.688142 -5.258325,36.687641 -5.258517,36.687322 -5.258842,36.686946 -5.259048,36.686708 -5.259908,36.686277 -5.260423,36.685907 -5.261241,36.685567 -5.261831,36.685456 -5.262433,36.684985 -5.262624,36.684648 -5.262938,36.684291 -5.262693,36.683935 -5.262521,36.683803 -5.262475,36.683371 -5.262539,36.683253 -5.262595,36.683261 -5.263097,36.683603 -5.263492,36.682937 -5.264012,36.682350 -5.264624,36.681852 -5.265169,36.681382 -5.265862,36.680945 -5.266519,36.680464 -5.267414,36.679717 -5.268154,36.678991 -5.268156,36.678666 -5.268347,36.678320 -5.268315,36.677609 -5.268758,36.677087 -5.269847,36.676075 -5.270768,36.675426 -5.271303,36.674956 -5.272051,36.674140 -5.272673,36.673245 -5.273898,36.671887 -5.274522,36.671794 -5.274968,36.671389 -5.275326,36.670986 -5.275634,36.670800 -5.276111,36.669168 -5.276541,36.668574 -5.277033,36.667790 -5.277255,36.667371 -5.278421,36.666682 -5.278542,36.666625 -5.278771,36.666414 -5.279480,36.665796 -5.279685,36.665549 -5.279741,36.665142 -5.279989,36.664840 -5.280355,36.664734 -5.280331,36.664671 -5.280318,36.664608 -5.280300,36.664753 -5.280464,36.664642 -5.280645,36.664692 -5.280715,36.664060 -5.280889,36.663480 -5.280960,36.663253 -5.281333,36.662994 -5.281388,36.662200 -5.281294,36.661688 -5.281429,36.660946 -5.281451,36.660540 -5.281603,36.659654 -5.281627,36.659707 -5.281352,36.659460 -5.281043,36.658871 -5.280998,36.658458 -5.281028,36.658340 -5.280924,36.657873 -5.281009,36.657691 -5.281004,36.657529 -5.280969,36.657494 -5.280996,36.656898 -5.281252,36.656470 -5.281733,36.656100 -5.281901,36.655718 -5.282211,36.654829 -5.282163,36.654362 -5.282061,36.654327 -5.281499,36.654230 -5.280409,36.653287 -5.280104,36.653193 -5.279092,36.652239 -5.279082,36.652293 -5.278748,36.652354 -5.278670,36.652364 -5.278705,36.652400 -5.277976,36.651963 -5.276952,36.651739 -5.276605,36.651376 -5.276318,36.650751 -5.276110,36.650521 -5.275614,36.649989 -5.275233,36.649582</coordinates></LineString></MultiGeometry><styleUrl>#Ruta_PRA</styleUrl></Placemark></Document></kml>";
html, body, #map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
 
<input type="button" value="toggle" id="toggle" /><input type="text" id="tag" value="PRA-239" /> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

proof of concept fiddle

來源

2014-12-02 23:20:23 geocodezip

+0

我適應您的代碼，它工作得很好。這很棒！！謝謝！！ ;） – Andynedine 2014-12-03 08:57:20

相關問題

 相關問題