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

Lesson4：在地圖上標註線

接下來是畫線的部份. 這個是 Google 地圖提供的範例. 範例裡是隨意的連接 5 個點.

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

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random())); }
points.sort(function(p1, p2) { return p1.lng() - p2.lng(); });
map.addOverlay(new GPolyline(points));

您也可以指定線條的顏色、粗細、和透明度
http://gis.nhlue.edu.tw/gmap/sample13a.htm

var color = ['#ffff00', '#ff0000', '#00ff00', '#00ffff', '#ff00ff'];
for (var y= 0; y<5;y++){
...
 //位置,顏色,粗細,透明度
map.addOverlay(new GPolyline(points,color[y],2,0.7));}

同樣的方式, 我們就連接我們有的 3 個點(連結),
http://gis.nhlue.edu.tw/gmap/sample14.htm

var polypoints = [];
var polypoint = new GPoint(121.516900, 25.047795);
polypoints.push(polypoint);
var polypoint = new GPoint(121.237371, 25.081479);
polypoints.push(polypoint);
var polypoint = new GPoint(121.521481, 25.034730);
polypoints.push(polypoint);
map.addOverlay(new GPolyline(polypoints, "#00FFFF", 7));

由於 Google 地圖 API 還是測試版本, Google 地圖 API 英文討論區裡有不少抱怨, 有些 Internet Explorer 並沒有辦法顯示.

如果在GoogleMap上需要使用到多邊形的話，需要對Xhtml的文件型態中多註記一個VML，這樣在IE中才能正確的顯示出來。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
最後修改: 2013年 12月 18日(三.) 16:49