研發記錄簿-Paladin: ASP.Net 實作 Google Maps Ver.3

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 如果想要取得某個位置的經緯度，很像變得比較複雜。而我是先在新版的地圖上用滑鼠點一個點，但要避開已經有標示的內容。