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

Lesson3：如何在地圖上放置標點和資訊

1. 直接從地圖上點找出您想要標示位置經緯度的方法，利用這個方法找幾個例子。

  • 台北火車站: 緯度: 25.047795, 經度:: 121.516900
  • 中正紀念堂: 緯度: 25.034730, 經度:: 121.521481
  • 桃園國際機場: 緯度: 25.081479, 經度:: 121.237371

    (花蓮教育大學慎思齋：緯度: 24.008669, 經度: 121.619725)

 

2.Google 地圖 API 網站有一個簡單的網頁上隨意丟入 10 個標點的範例

http://gis.nhlue.edu.tw/gmap/sample9.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 10 random markers in the map viewport using the default icon
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}

bound1.jpg

 

我們可以從這個範例, 套入我們剛剛找到的位置

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

var point = new GPoint(121.516900, 25.047795);
var marker = new GMarker(point);
map.addOverlay(marker);

var point = new GPoint(121.521481, 25.034730);
var marker = new GMarker(point);
map.addOverlay(marker);

var point = new GPoint(121.237371, 25.081479);
var marker = new GMarker(point);
map.addOverlay(marker);

也可以利用自定的ICON更換顯示在地圖上的圖徵
http://gis.nhlue.edu.tw/gmap/sample10a.htm

var icon = new GIcon();
icon.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
icon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var point = new GPoint(121.516900, 25.047795);
var marker1 = new GMarker(point,icon);
map.addOverlay(marker1);

 

3.當然, 我們希望當用滑鼠點位置時, 可以顯示一些位置的資訊

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

var point = new GPoint(121.516900, 25.047795);
var marker1 = new GMarker(point);
var html1 = "台北火車站:<br>經度: 25.047795,<br>緯度: 121.516900";
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml(html1);
});
map.addOverlay(marker1);

var point = new GPoint(121.521481, 25.034730);
var marker2 = new GMarker(point);
var html2 = "中正紀念堂:<br>經度: 25.034730,<br>緯度: 121.521481";
GEvent.addListener(marker2, "click", function() {
marker2.openInfoWindowHtml(html2);
});
map.addOverlay(marker2);

var point = new GPoint(121.237371, 25.081479);
var marker3 = new GMarker(point);
var html3 = "桃園國際機場:<br>經度: 25.081479,<br>緯度: 121.237371";
GEvent.addListener(marker3, "click", function() {
marker3.openInfoWindowHtml(html3);
});
map.addOverlay(marker3);

 

4.顯示的位置的資訊是一般的 HTML 網頁編輯, 因此你可以隨意的放入你喜歡的連結或照片

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

//第一個在 Google 地圖上的經緯度
var point = new GPoint(121.516900, 25.047795);
var marker1 = new GMarker(point);
//第一個位置的更多資訊區
var html1 = '台北火車站:<br><img src=http://www.sinobooks.com.tw/city/building/taipei/images/76.jpg><br>照片出處: <a href=http://www.sinobooks.com.tw/city/building/taipei/011.asp>城市夢見街</a>';
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml(html1);
});
map.addOverlay(marker1);
最後修改: 2015年 03月 20日(五.) 10:07