您正使用訪客身分瀏覽 (登入)
頁面路徑
 
Google Maps的建製

 

第一週：如何利用 Google Maps API 來把 Google 所提供的地圖服務內嵌到你的網頁中，並且將座標定至你所要標記的地點。

week1

第二週：如何在地圖上套疊Google erath地圖資料、控制地圖的中心點。

week2
 

第三週：如何結合資料庫。

week3
week32

第一週
步驟1：先申請一組 Google Maps API Key
 

  1. Google Maps API Key申請頁面。
     

     sign1

    sing2


     

  2. 將核取控制項打勾，並將欲申請Google Mass API的網址填入(例如：http://gis.ndhu.edu.tw/)。

     
  3. 按 "Generate API Key" 取得 Key。

     
  4. 最後會出現三個方塊，分別是你取得的 Key，你指定的 URL，以及一個範例。

    範例中會有如下的片段：

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAaSPRSK2r14j_iE4Ep7VXYRRuhTmhDYL4IvkJj8qgvGgAMSOiTxR6GEQqh2p59Oop0fzdLuX7SZhbJg"
    type="text/javascript"></script>

    紅字的部份就是你的 Google 地圖 key，此段JavaScript需放至<head> </head>之間。
     

步驟2：取得欲標記的地點的經緯座標值
 
  1. Google Earth搜尋頁面。

     
  2. 在「目的地」輸入欲標記的地點的地址或名稱，並按"開始搜尋"(例如： 花蓮教育大學)。

     
  3. 確認搜尋結果無誤後，請按滑鼠右鍵選"內容"，即可取得 這個地點的經緯度。
    (事先在google earth的「工具」-->「選項」-->3D檢視的"顯示經緯度-->「十進度制小數」，此種經緯度的格式在Google Map裡才有辦法讀取)
    set10
    ws84

     

步驟3：將以下範例程式片段copy到<body></body>之間 ，並且把<body>換成<body onload="load()" onunload="GUnload()">：
<!--Google Map 顯示的位置，可自由決定大小-->
<div id="map" style="width: 500px; height: 500px"></div>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
 

步驟4：以下為控制Google Map的JaveScript可以copy到<head> </head>之間：
<!--以下為控制Google Maps的JavaScript-->
<script type="text/javascript">
//網頁全域變數
var map;

//Google Maps 地圖初始化，網頁載入時只執行一次
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"),
{ size: new GSize(500,500) } );
//比例尺
map.addControl(new GScaleControl());

//設定要顯示的地圖控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//設定 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(24.009445, 121.619396), 13);
//設定Google earth類型地點
map.addMapType(G_SATELLITE_3D_MAP);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
//設定地圖預設顯示類型
map.setMapType(G_SATELLITE_3D_MAP);

//標記在 Google 地圖上的經緯度
var point = new GLatLng(24.009445, 121.619396);
var marker = new GMarker(point);
map.addOverlay(marker);

//在地圖上放置標點說明
var html = "花蓮教育大學";
map.openInfoWindowHtml (map.getCenter(), html);
}
}
</script>
 


詳細說明：
//設定要顯示的控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Google Maps API 內建四種控制項：
 

     
  1. GLargeMapControl : 大型地圖的控制項。

     
  2. GSmallMapControl : 小型地圖的控制項。

     
  3. GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。

     
  4. GMapTypeControl : 顯示地圖型態切換的控制項。

     
  5. GScaleControl      : 顯示地圖比例尺
     
  6. GOverviewMapControl :顯示鷹眼視窗

 
//設定 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(24.009445, 121.619396), 16);

設定 Google 地圖的中心點位置和縮放大小：
 

     
  • setCenter(GLatLng(經度, 緯度), [+ 放大(近)]  [- 縮小(遠)]);
 
//設定地圖預設顯示類型
map.setMapType(G_SATELLITE_MAP);

設定地圖預設顯示類型：4種地圖類型分別為：G_NORMAL_MAP , G_SATELLITE_MAP , G_HYBRID_MAP , G_PHYSICAL_MAP
 
  • setMapType(地圖類型);
//標記在 Google 地圖上的經緯度
var point = new GLatLng(24.009445, 121.619396);
var marker = new GMarker(point);
map.addOverlay(marker);

//在此標記所要顯示的資訊
var html = "花蓮教育大學";
map.openInfoWindowHtml (map.getCenter(), html);
 

在地圖上標記地點：
  1. 設定座標值：
    var point = new GLatLng(24.009445, 121.619396);
    var marker = new GMarker(point);

     
  2. 在地圖上放置標點 :
    map.addOverlay(marker);

     
  3. 在地圖上放置標點說明 :
    var html = "花蓮教育大學";
    //
    map.openInfoWindowHtml (map.getCenter(), html);

    //當滑鼠點選標點時,show出標點說明
    GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});

    //當滑鼠滑到標點時,show出標點說明
    GEvent.addListener(marker, "mouseover", function() {marker.openInfoWindowHtml(html);});
 //自行加入地形類型控制項
map.addMapType(G_PHYSICAL_MAP);
//自行加入Google Earth類型控制項
map.addMapType(G_SATELLITE_3D_MAP);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);


//衛星影像+混合地圖
var mapControl = new GHierarchicalMapTypeControl();
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "混合地圖", true);
map.addControl(mapControl);

在地圖上標記地點：
maptype的預設是「衛星」、「地圖」、「混合地圖」3種類型，其他類型需自己加入
map.addMapType(G_PHYSICAL_MAP);
 

 

第二週：如何在地圖上套疊Google erath地圖資料、控制地圖的中心點。
主題一：疊資料在Google map上。
步驟1：建立一資料夾,取名為kmz 將要套點的點資料、面資料置入該資料夾中

下載線資料
下載面資料

 步驟2：將以下範例程式片段copy到 「網頁全域變數」位置：

 //宣告線資料
var debris = new GGeoXml("http://gis.ndhu.edu.tw/landslide/kmz/debris.kmz");
//宣告多邊形資料 kmz
var belongtodebris = new GGeoXml("http://gis.ndhu.edu.tw/landslide/kmz/belongtodebris.kmz");

 

步驟3：將以下範例程式片段copy到GEvent.addListener後：

  //套疊kmz到地圖上,線資料
map.addOverlay(debris);
//套疊kmz到地圖上 面資料
map.addOverlay(belongtodebris);

 

street view 的套疊

步驟1：將下列程式copy 到網頁全域變數之後

//網頁全域變數

var myPano;

function load(){
  var fenwayPark = new GLatLng(42.345573,-71.098326);
  panoramaOptions = { latlng:fenwayPark };
  myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
  GEvent.addListener(myPano, "error", handleNoFlash);
}

function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert("Error: Flash doesn't appear to be supported by your browser");
    return;
  }
} 

步驟2：將下列程式copy 到<body></body>

<div name="pano" id="pano" style="width: 500px; height: 300px"></div>

 

 

主題二：建立新的網頁,用下拉式選單來控制地點中心點：

Access Database 連結與網頁表格資料查詢設計  下載鄉鎮中心點的資料

  • 利用Microsoft Office Access匯入您用Excel的表格，建立 App_Data\test.mdb 資料庫，並自動產生主索引欄位(可大幅加快資料的存取速度)，利用鄉鎮 X,Y 座標的中心點，對GoogleMap地圖中心的控制。

  • 步驟一：利用Microsoft Office Access匯入您用Excel的表格，建立 App_Data\test.mdb 資料庫

  • excel1

  • addmb

  • impole

  • impole1

  •    

步驟二：建立新的網頁項目，用來控制地圖中心位置

在Visual Web Developer 2008裡

網站-->加入新項目-->選擇視覺化的網路表單設計WebForm-->指定檔案的名稱 Default2.aspx-->將VB開發的程式單獨放在個別的檔案中(維持網頁的清楚簡單，容易修改、容易除錯，也能保障程式的安全性Default2.aspx.vb，一般人讀取網頁按滑鼠右鍵"檢視原始檔"，也看不到設計的原始碼)

 

Step2：網頁編輯模式切換到"設計"-->游標移動到工具箱-->在工具箱中拖曳兩個DropDownList到設計的頁面中-->
在屬性表裡設定這兩個下拉式的ID分別為cboTown、cboVillage

 

 

Step3：在工具箱中拖曳兩個AccessDataSource到設計的頁面中-->在屬性表裡設定這兩個下拉式的ID分別為adsTown、adsVillage

 

Step4：設定AccessDataSource的資料來源，產生一個SQL的查詢條件(這個結果會在第七步對應到第一個下拉式選單中)

 

(1)將Step1製作的test.mdb複製到網站目錄的App_Data資料夾中-->點選第一個adsTown-->設定資料來源為App_Data資料夾下的sample29.mdb。

(2)指定資料表或檢視的資料行-->指定查詢的欄位為Town-->只傳回不重複的資料列，過濾掉重複的資料項。

(3)利用測試查詢的方式，檢查查詢的正確性。

 

Step5：設定第二個adsVillage產生的SQL查詢語法，這個語法會參照第一個下拉式選單的結果(這個結果會在第七步對應到第二個下拉式選單)

 

(1)點選第二個adsVillage-->設定資料來源為App_Data資料夾下的test.mdb。指定資料表或檢視的資料行-->指定查詢的欄位為Village-->由「where」來設定第二個下拉選單與第一個選單的關係

(2)在SQL裡Where後面接的是查詢條件式，這個條件會以「加入where子句」的對話框呈現。在「資料行」選Town-->「來源」選control -->參數屬性「控制項ID」選cboTown-->接著按「加入」，如此會自動產生where子句的語法

(3)按下確定後，可以看到"select village from center where town=? " 這個Select的陳述式。

(4)完成後也可以利用「測試查詢」來驗證設定的查詢語法有沒有錯誤，按下「測試查詢」可以手動的輸入某一鄉鎮值，看看查詢出來的結果。

 

選取要顯示在DropDownList中的資料欄位Town選取DropDownList值的資料欄位Town ，這裡我們也只會有Town可以選，因為我們在SQL就只有篩選village表裡的Town欄位。
 

Step6：結合第五步adsTown、第六步adsVillage到對應的下拉式選單cboTown與cboVillage，讓下拉式選單裡可以看到SQL測試的查詢結果。


(1)設定cboTown的資料來源

(2)選取資料來源為adsTown

(3)資料繫結adsTown後，強制每次這個項目被選取時，要回傳一次AutoPostBack(cboTown下拉式選單要連動到cbovillage，在cboTown勾選AutoPostBook後，cbovillage才會連動到Town值的每次改變)。

(4)設定cboVillage的資料來源-->選取資料來源為adsVillage-->選取要顯示在DropDownList中的資料欄位village選取DropDownList值的資料欄位village 即可，不用再設定AutoPostBack。

 

Step8：AJAX與Access的連結：利用button傳送前述步驟中選擇鄉鎮村里中心點的經緯度，讓Google Map的中心點隨之移動。


在工具箱中在拖曳一個button，針對button 按滑鼠二下，會開啓前述表單設計頁的程式頁面Default2.aspx.vb，可編輯程式。

 將下列的程式 copy 到 Default2.aspx.vb  Protected Sub  End Sub 之間
  Dim conn As New Data.OleDb.OleDbConnection(ConfigurationManager.ConnectionStrings("sfConnectionString").ConnectionString)
'讀取資料表中對應的經緯度
Dim sql As String = "select x,y from village where village ='" & cboVillage.SelectedValue & "'" 'SQL查詢語法
Dim cmd As New Data.OleDb.OleDbCommand(sql, conn)
Dim locatmap As String = "<script>var msg='"
conn.Open()
Dim dr As Data.OleDb.OleDbDataReader = cmd.ExecuteReader
While dr.Read
locatmap &= dr("x") & "^" & dr("y")
End While
locatmap &= "'" & vbCrLf & "parent.plocate(msg);</script>"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "b", locatmap)
dr.Close()
conn.Close()
conn.Dispose()

 

步驟4：將以下範例程式片段 copy 到 default2.aspx 的 }}</scpript> 之前：

//將讀到的資料分解成經緯度,執行定位功能

function plocate(msg)
{
var arr1 = msg.split('^');
//移動至 X,Y 坐標
map.setCenter(new GLatLng(arr1[1], arr1[0]),12);
}
 

 檢查web.config的內容有沒有下列程式段 

  <configuration>
  <appSettings/>

<connectionStrings>
    <add name="sfConnectionString" connectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\test.mdb"
        providerName="System.Data.OleDb" />
  </connectionStrings>

下

第三週：資料庫  下載點資料  , web.config

  • 利用Microsoft Office Access匯入您用Excel的表格，建立 App_Data\test.mdb 資料庫，並自動產生主索引欄位(可大幅加快資料的存取速度)，利用鄉鎮 X,Y 座標的中心點，對GoogleMap地圖中心的控制。

  • 步驟一：利用Microsoft Office Access匯入Excel的表格

  • 步驟二： 開啓下拉式選單的程式頁，新增一個危險等級的選單，內容分別有(All)、 高、中、低、極低

we

　

查詢按鈕，點二下即可編輯程式，將下列程式copy到 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click　後

 '宣告一個變數,用來儲放資料庫名稱,資料庫名庫是在web.config裡設定
Dim conn As New Data.OleDb.OleDbConnection(ConfigurationManager.ConnectionStrings("sfConnectionString").ConnectionString)
'SQL查詢語法
Dim sql As String = "select * from allhaze where village ='" & cvillage.SelectedValue & "'"
'宣告一個字串，用來儲存讀出來的資料
Dim kml As String = "<script>var msg='" '組織字串參數

If cdanger.SelectedIndex > 0 Then
sql &= " and hazard='" & cdanger.SelectedValue & "'"
End If
sql &= " order by id"
Dim cmd As New Data.OleDb.OleDbCommand(sql, conn)
conn.Open()
Dim dr As Data.OleDb.OleDbDataReader = cmd.ExecuteReader
While dr.Read
kml &= dr("x") & "^" & dr("y") & "^" & dr("hazard") & "^<p>" & dr("id") & " 個案</p>"
kml &= "<table border=1 style=font-size:10pt><tr><td width=70px>地址</td><td width=200px>" & dr("town") & dr("village") & dr("address") & "(" & dr("house") & "戶)</td></tr>"
kml &= "<tr><td>災害類型</td><td>" & dr("type") & "</td></tr>"
kml &= "<tr><td>危險溪流</td><td>" & dr("stream") & "(避難所：" & dr("shelter") & ")</td></tr>"
kml &= "<tr><td>詳細資料</td><td><a href=""pdf/" & dr("id") & ".pdf"" target=""_blank""><img src=images/pdf.gif border=0></a></td></tr></table>"
kml &= "%"
End While
'最後一筆資料不需要'%'
If Right(kml, 1) = "%" Then kml = Left(kml, Len(kml) - 1)
kml &= "'" & vbCrLf & "parent.locate(msg);</script>"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "", kml)
dr.Close()
conn.Close()
conn.Dispose()
　

  • 開啓地圖頁，以本程式為例，請開啓default2.aspx,將以下範例程式片段 copy 到 default2.aspx 的 </scpript> 之前：

    //網頁全域變數

    //執行村里定位功能，同時顯示相關的危險聚落點位
    //傳入參數　msg：危險聚落資料串列
    function locate(msg) {
    //移除原本地圖上所有的marker
    for (i=0; i<marker.length; i++) {
    map.removeOverlay(marker[i]);
    }
    //宣告一變數，將資料庫讀取出來的每筆資料放入
    var arr1 = msg.split('%');
    //宣告一變數，將每筆資料欄位分別放入
    var arr2;
    var count = arr1.length;
    var x=0;
    var y=0;
    for(var i=0; i<count; i++) {
    arr2 = arr1[i].split('^');
    x += parseFloat(arr2[0]);
    y += parseFloat(arr2[1]);
    //建立危險聚落點位
    map.addOverlay(createMarker(arr2[0], arr2[1], arr2[2], arr2[3]));
    }
    //計算平均經緯度
    x = x / count;
    y = y / count;
    //將地圖中心點移動至 X,Y 坐標
    map.setCenter(new GLatLng(y, x), 14);
    }

    //建立危險聚落點位
    //傳入參數　x, y：坐標，d：危險度(顏色)，msg：描述文字
    function createMarker(x, y, d, msg) {
    var latlng = new GLatLng(parseFloat(y), parseFloat(x));
    var myIcon = new GIcon(G_DEFAULT_ICON);
    myIcon.iconSize = new GSize(32, 32);
    myIcon.shadowSize = new GSize(0, 0);
    myIcon.iconAnchor = new GPoint(16, 32);
    myIcon.infoWindowAnchor = new GPoint(15, 1);
    //定義點資料顯示的圖樣
    if (d=="極低") {
    myIcon.image = "pic/white-dot.png";
    } else if (d=="低") {
    myIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
    } else if (d=="中") {
    myIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png";
    } else if (d=="高") {
    myIcon.image = "pic/red.gif";
    }
    var markerOptions = { icon:myIcon };
    //加入新元素至 marker 陣列尾部，並傳回陣列的新長度
    var i = marker.push(new GMarker(latlng, markerOptions));
    marker[i-1].value = msg;
    //加入監聽器，讓點位資料有 mouseover 功能(滑鼠移過去自動跳出泡泡視窗)
    GEvent.addListener(marker[i-1],"click", function() {
    map.openInfoWindowHtml(latlng, msg);
    });
    return marker[i-1];
    }

  • 主題二： 建立新的網頁項目，重新建立一新的下拉式選單，或者是將剛剛完成的程式頁另存新檔為week3-2.aspx

  • 在week3-2.aspx建立一個GridView、AccessDataSource

  • AccessDataSource設定要讀取的欄位後，與GridView關連即可查詢欄位資料

　

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