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關連即可查詢欄位資料

 

Last modified: Wednesday, 18 December 2013, 04:49 PM