[Google Maps API] 從地址取得座標位置

2021-11-20 13:49:42

在google maps api想要從地址取得座標

view plain copy to clipboard print

function getLatLngByAddr() {
var geocoder = new google.maps.Geocoder(); //定義一個Geocoder物件
geocoder.geocode(
{ address: '[地址]' }, //設定地址的字串
function(results, status) { //callback function
if (status == google.maps.GeocoderStatus.OK) { //判斷狀態
alert(results[0].geometry.location); //取得座標
} else {
alert('Error');
}
}
);
}

要各別取得經度和緯度的方法

view plain copy to clipboard print

$lat=results[0].geometry.location.lat();
$lng=results[0].geometry.location.lng();

再改寫一下就可以再輸入表單的時候，輸入地址就取得座標位置了

view plain copy to clipboard print

$("#getGeo").click(function(){
$address=$("#address").val();
getLatLngByAddr($address);
});
function getLatLngByAddr($address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{ address: $address },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$lat=results[0].geometry.location.lat();
$("#lat").val($lat);
$lng=results[0].geometry.location.lng();
$("#lng").val($lng);
} else {
alert('Error');
}
}
);
}

參考資料

Geocoding service
Google Map JavaScript API v3 的一些常用語法

vhs- CSS 的動畫庫 SVG Viewer：線上檢視還有最佳化 SVG 的工具，亦可轉檔出 SVG 或 React 格式

你可能也會喜歡的

[SEO] 讓你的連結可以被 google 檢索

[Google Maps API] 關閉所有開啟的 infowindow

[Google AdSense] 設定電匯收款條件，避免被扣太多手續費

使用 YouTube 品牌帳戶管理多個頻道或轉移帳號

Google 釋出了 26 個新的 AI plugin

使用 Feedburner 抓取網站的 RSS 內容

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。