2014年1月2日 星期四

ASP.Net 實作 Google Maps Ver.3

看了  Google Maps JavaScript API 出到第三版,發現以前使用 Google Map 來開發都需要申請 API 金鑰,在第三版之後就不需要了。聽起來便民了許多,而且看網站上所介紹的範例,也還蠻簡單的,於是就想用 ASP.Net 練習一下,但我什麼跑不出來,空白一片。


後來發現,我把範例中的 <div id="map-canvas" ></div> 放到 <form> 裡面就會有問題,但移出來就正常了。

雖然在 Google Maps v3 in ASP.NET 知道要正常顯示地圖需要加上
html, body,#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}  
但一直沒發現在 Asp.Net 裡預設都是會包在  <form> 裡面,所以正確的處理方式是將上面的 css 設定加上 form  就可以了。
html, body,form,#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}  


最後完整的程式就會如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GMap01._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Map</title>    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
     /* 設定地圖顯示的 css */
      html, body,form, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }     
      
    </style>

    <!-- 宣告使用新版的地圖 v3 -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    
        function initialize() {

            //取得目標的經緯度
            var latlng = new google.maps.LatLng(24.7758666666667, 121.04685);

            //設定地圖的選項
            var mapOptions = {
                zoom: 15, //地圖縮放的層級
                center: latlng, //地圖中心擺放位置
                mapTypeId:google.maps.MapTypeId.TERRAIN //地圖呈現的方式
            };

            //把地圖放在頁面的 div 裡
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            //宣告地圖標記選項
            var markerOptions = {
                //地圖標記位置
                position: latlng,
                //設定要套用的地圖
                map: map,
                //地圖標記要顯示的文字
                title:"My office"
            }

            //把地圖標記標示在地圖上
            var marker = new google.maps.Marker(markerOptions);         
        }
      
    </script>
</head>
<body onload="initialize()">

    <form id="form1" runat="server">        
        <div id="map-canvas" ></div>
    </form>

</body>
</html>


程式範例中有個 mapTypeId:google.maps.MapTypeId.TERRAIN,主要是用來設定地圖呈現的方式。目前的選擇有以下四種:

ROADMAP:一般的 2D 地圖模式(預設樣式)
SATELLITE:衛星空拍圖
HYBRID:衛星空拍圖加上道路、城市名稱等的顯著圖層
TERRAIN:地形圖

在新版的 Google Map 如果想要取得某個位置的經緯度,很像變得比較複雜。而我是先在新版的地圖上用滑鼠點一個點,但要避開已經有標示的內容。


接著就會跳出街景服務的小框框,可以在紅色框框圈起來的地方再點一下,就會跑出一個規劃路線的框框,把這個數值再拿到國立成功大學水工試驗所的「大地坐標轉換程式」,取得TWD67經緯度坐標值。也就是紅色框框圈起來的地方,而這就是 google.maps.LatLng() 裡面的經緯度值了。



經過一番嘗試後,終於含淚看到地圖跑出來了。雖然不知道有什麼好高興的,但就是感動嘛嘛~





參考資料:

2 則留言:

  1. 請問一下 我照著您給的SAMPLE執行出來的結果會變成他會LOADING到地圖一下 但馬上跳出"這個網頁並未正確載入 Google 地圖。請查看 JavaScript 控制台,瞭解相關的技術詳情。"
    的錯誤訊息,這有可能是什麼原因呢?

    回覆刪除
    回覆
    1. 在 2016 年 6 月22 日,Googel 重新規範了 Google Map API 的使用規則,在這日期之後,如果要繼續使用這免費的 API , 每天最多可以載入 25000 次,超過就要選擇付費方案。如果您想進一步了解,可以參考:
      https://www.latecnosfera.com/2016/06/google-maps-api-error-missing-keymap-error-solved.html

      刪除