您正使用訪客身分瀏覽 (登入)
頁面路徑

Lesson5：利用XML大量載入多點座標位置及連結

畫一個桃園中正機場和西雅圖 Sea-Tac 機場間的大圓航線.

http://gis.nhlue.edu.tw/gmap/sample15.htm 

var request = GXmlHttp.create();
request.open("GET", "sample15.xml", true);
request.onreadystatechange = function() {

if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var westpoints = [];
var eastpoints = [];
markers = xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {
var tmplng = parseFloat(markers[i].getAttribute("lng"));
var tmplat = parseFloat(markers[i].getAttribute("lat"));
if (tmplng < 0) {var westlng = tmplng; var eastlng = tmplng + 360;}
else {var westlng = tmplng - 360; var eastlng = tmplng;}
westpoints.push(new GPoint(westlng, tmplat));
eastpoints.push(new GPoint(eastlng, tmplat));
}

var westhemi = new GPolyline(westpoints);
var easthemi = new GPolyline(eastpoints);
if (InitialLongitude > 0) {map.addOverlay(easthemi);}
 else {map.addOverlay(westhemi);}

GEvent.addListener(map, "moveend", function() {
var center = map.getCenterLatLng();
if (center.x < 0) {map.clearOverlays();map.addOverlay(westhemi);}
else if (center.x > 0) {map.clearOverlays();map.addOverlay(easthemi);}
});
 <!-- end if (request.readyState == 4) -->
}
<!--end request.onreadystatechange = function()-->
}
request.send(null);

sample15.xml

- <markers>
  <marker id="1" lat="25.082066" lng="+121.238143" name="Taipei" />
  <marker lat="26.460646" lng="+122.734318" />
  ...

   <marker lat="48.255502" lng="-123.69520" />

  <marker id="50" lat="47.443621" lng="-122.301500" name="SeaTac 國際機場" />
  </markers>

　

XML 和 Asynchronous RPC 的方式

利用 XML 的方式, 一次讓大量的標點顯示在 Google 地圖上. 比如下個例子顯示機場的位置

http://gis.nhlue.edu.tw/gmap/sample16.htm

var request = GXmlHttp.create();
request.open("GET", "sample16.xml", true);
request.onreadystatechange = function() {

if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
htmlinfo = new Array(markers.length);

for (var i = 0; i < markers.length; i++) {
var point = new GPoint(parseFloat(markers[i].getAttribute("lng")), parseFloat(markers[i].getAttribute("lat")));
var marker = createMarker(point, markers[i].getAttribute("title"), markers[i].getAttribute("url"), htmlinfo[i], i);
map.addOverlay(marker);
}

}

}
request.send(null);

sample16.xml

- <markers>
  <marker lat="22.574072" lng="120.348358" title="高雄小港機場" url="http://www.kia.gov.tw/" />
 ...  </markers>

　

花蓮潛勢危險溪流查詢資訊

http://gis.nhlue.edu.tw/gmap/sample17.htm sample17.xml

　

補充：用Access轉出來的xml檔案型態與前述範例不一樣

- <belongtodebris>
  <NAME>A109</NAME>
  <DETAL>http://gis.nhlue.edu.tw/landslide/debris/A109.html</DETAL>
  <X>121.519514648</X>
  <Y>23.78049166</Y>
  </belongtodebris>
...

雖然自訂的XML標籤對同一名稱的 attribute 只能有一個，但是因為可以有多個同一類別(Type)的 element，所以前述的範例中一個marker可以有四個element，自己剖析屬性內容取得有意義的 attribute value。

最後修改: 2013年 12月 18日(三.) 16:49