後來發現,我把範例中的 <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() 裡面的經緯度值了。
參考資料:
01:Simple Map
請問一下 我照著您給的SAMPLE執行出來的結果會變成他會LOADING到地圖一下 但馬上跳出"這個網頁並未正確載入 Google 地圖。請查看 JavaScript 控制台,瞭解相關的技術詳情。"
回覆刪除的錯誤訊息,這有可能是什麼原因呢?
在 2016 年 6 月22 日,Googel 重新規範了 Google Map API 的使用規則,在這日期之後,如果要繼續使用這免費的 API , 每天最多可以載入 25000 次,超過就要選擇付費方案。如果您想進一步了解,可以參考:
刪除https://www.latecnosfera.com/2016/06/google-maps-api-error-missing-keymap-error-solved.html