Google Map教學：操作地址 - 我的部落格
文章推薦指數： 80 %
製作Google Map需要google提供的google map API才能實做，今天我們使用Geocoding API裡的地理編碼請求與Map JavaScript API來實做，以下介紹兩種的官網文件資訊 ...
什麼是GoogleMap?是由Google公司像全球提供的電子地圖服務，用地圖規劃出地表、線條、符號等資訊。
架構
我們比較常看到的用法，在文字框輸入想要地點或地址之後點查詢，地圖會自動刷新顯示地標以及相關資訊。
製作GoogleMap需要google提供的googlemapAPI才能實做，今天我們使用GeocodingAPI裡的地理編碼請求與MapJavaScriptAPI來實做，以下介紹兩種的官網文件資訊
1.GeocodingAPI
Geocoding為地理編碼，將地址（如“1600AmphitheatreParkway，MountainView，CA”）轉換為地理坐標（如緯度37.423021和經度-122.083739）的過程，您可以使用它來在地圖上放置標記或定位地圖。
您可以通過HTTP接口訪問GeocodingAPI。
以下是地理編碼請求的示例。
地理編碼請求和響應（緯度/經度查找）
以下示例請求“1600AmphitheatreParkway，MountainView，CA”的緯度和經度，並指定輸出必須採用JSON格式。
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KE
您可以通過在Web瀏覽器中輸入URL來進行測試（請務必YOUR_API_KEY使用實際的API密鑰替換）。
響應包括地址的緯度和經度。
以下是JSON中的地理編碼響應示例：
{
"results":[
{
"address_components":[
{
"long_name":"1600",
"short_name":"1600",
"types":["street_number"]
},
{
"long_name":"AmphitheatrePkwy",
"short_name":"AmphitheatrePkwy",
"types":["route"]
},
{
"long_name":"MountainView",
"short_name":"MountainView",
"types":["locality","political"]
},
{
"long_name":"SantaClaraCounty",
"short_name":"SantaClaraCounty",
"types":["administrative_area_level_2","political"]
},
{
"long_name":"California",
"short_name":"CA",
"types":["administrative_area_level_1","political"]
},
{
"long_name":"UnitedStates",
"short_name":"US",
"types":["country","political"]
},
{
"long_name":"94043",
"short_name":"94043",
"types":["postal_code"]
}
],
"formatted_address":"1600AmphitheatreParkway,MountainView,CA94043,USA",
"geometry":{
"location":{
"lat":37.4224764,
"lng":-122.0842499
},
"location_type":"ROOFTOP",
"viewport":{
"northeast":{
"lat":37.4238253802915,
"lng":-122.0829009197085
},
"southwest":{
"lat":37.4211274197085,
"lng":-122.0855988802915
}
}
},
"place_id":"ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
"types":["street_address"]
}
],
"status":"OK"
}
※要使用地理編碼API，您必須先在GoogleCloudPlatform控制台中激活API，然後獲取正確的身份驗證憑據。
您需要在每個請求中提供API密鑰
單擊下面的按鈕以完成您將要執行的過程：
創建或選擇一個項目
啟用API
獲取API密鑰
2.MapJavaScriptAPI
通過MapsJavaScriptAPI，您可以使用自己的內容和圖像自定義地圖，以便在網頁和移動設備上顯示。
MapsJavaScriptAPI具有四種基本地圖類型（路線圖，衛星，混合和地形），您可以使用圖層和样式，控件和事件以及各種服務和庫來修改這些類型。
以下網頁顯示以澳大利亞新南威爾士州悉尼為中心的地圖：
我們創建了一個div名為“map”的元素來保存地圖。
我們定義了一個JavaScript函數，用於在中創建地圖div。
我們使用script標記加載MapsJavaScriptAPI。
要加載MapsJavaScriptAPI，請使用以下示例中的標記：
此script標記是必需的。
該async屬性允許瀏覽器在加載MapsJavaScriptAPI時呈現您網站的其餘部分。
API準備就緒後，將調用使用callback參數指定的函數。
該key參數包含應用程序的API密鑰 以下範例是在開啟地圖與查詢地圖時，顯示的googlemap的畫面: 1.開啟地圖 剛開啟地圖時預設是帶台灣地圖，這時可直接輸入地點或地址之後點選查詢，googlemap會重新讀取地圖 2.查詢地點 當查詢地點時，googlemap會重新讀取查詢到的地圖資訊，顯示地點的道路、附近地名等等。
上面顯示剛查詢地點後googlemapAPI提供完整地址，可點選右邊的複製圖示，複製地址到文字框做儲存。
以下程式碼是我使用GoogleMapAPI的GeocodingAPI與MapJavaScriptAPI的寫法 //打開地圖 functionopenAddressMap(address,number){ //經緯度變數 varLatlng=null; //判斷查詢的地點或地址確認是否為空值 if(address!=''&&address!=undefined){ //使用GeocodingAPI，目前要收費 vargeocoder=newgoogle.maps.Geocoder(); //用地點或地址先取得經緯度 geocoder.geocode({'address':address},function(results,status){ //狀態為OK才可以進行 if(status==google.maps.GeocoderStatus.OK){ varlatitude=results[0].geometry.location.lat(); varlongitude=results[0].geometry.location.lng(); //使用MapJavaScriptAPI的LatLng物件當經緯度 Latlng=newgoogle.maps.LatLng(latitude,longitude); $("input[name='copy_address']").val(results[0].formatted_address); //用變數在地圖使用哪些參數 varmapOptions={ zoom:17, zoomControl:true, center:Latlng, mapTypeId:google.maps.MapTypeId.ROADMAP } //在頁面上使用MapJavaScriptAPI的Map物件檔地圖(map與copy_map) varmap=newgoogle.maps.Map(document.getElementById('map'),mapOptions); varcopy_map=newgoogle.maps.Map( document.getElementById('copy_map'), mapOptions); //使用MapJavaScriptAPI的marker物件設定經緯度 varmarker=newgoogle.maps.Marker({ position:Latlng }); //id為map與copy_map區塊set地圖物件 marker.setMap(map); marker.setMap(copy_map); //顯示id為map區塊，隱藏id為copy_map區塊 $("#map").show(); $("#copy_map").hide(); console.log(results[0].formatted_address); }elseif(status==google.maps.GeocoderStatus.OVER_QUERY_LIMIT){ //因API有請求計算次數，所以先在背後元素做兩個相同的地圖，當第二次使用可以用另外一张 顯示達到減少重複相同查詢的次數 $("#map").hide(); $("#copy_map").show(); }else{ alert("Geocodewasnotsuccessfulforthefollowingreason:"+status); } }); } } } //複製完整地址功能 functioncopyAddress(){ //先取得地址文字框資料 varaddress=$("input[name='copy_address']").val(); if(address==''){ alert("請先查詢地點或地址"); }else{ $("input[name='address']").val(address); } } 參考資料:https://zh.wikipedia.org/wiki/Google%E5%9C%B0%E5%9B%BE https://developers.google.com/maps/documentation/geocoding/intro https://developers.google.com/maps/documentation/javascript/tutorial #Geocoding #MapJavaScript
延伸文章資訊
- 1茶米老師教室- Geolocation API - Google Sites
- 2Geocoding API：取得API 金鑰| Google 地圖平台付費方案
Google Maps API 網路服務會拒絕同時使用用戶端ID 與API 金鑰送出的要求。 產生數位簽章. Google 地圖平台付費方案客戶向Geocoding API 送出要求時，必須 ...
- 3[30apis] Day 2 : Google Map Geolocation API - iT 邦幫忙
關於Geolocation 在實作之前，我大致上知道Google Map 有個定位的API （廢話）但我一直以為它叫做location API。 所以在這邊對Location 跟Geolo...
- 4HTML5 Geolocation API (地理位置) 測試 - 小狐狸事務所
使用Geolocation API 當然要對地理定位有基本的認識, 也就是要搞清楚以經緯度為基礎的地理座標系統. 簡言之, 把地球從北極到南極縱切的線稱為經線, 以英國 ...
- 5HTML5 的Geolocation(地理位置) API | 文章 - DeTools 工具死神
google map 誕生到今年已經15 年的樣子，地理資訊系統的應用目前也已經非常多元，不過這邊還是來講一下HTML5 的Geolocation(地理位置) API 該怎麼用吧 ...
