HTML Google地圖
- WBOY原創
- 2024-09-04 16:42:13743瀏覽
在 HTML 中，我們在前面的文章中討論了元素的一些屬性和屬性。它具有許多吸引網路技術線上用戶的功能。 Google 地圖是 Google 公司的功能之一，我們將在 HTML 程式碼中使用相同的 Google 地圖來在網站上顯示位置。主要用於公司網站準確識別其所在區域的位置。它透過使用 javascript 語言呼叫 HTML 來定位和設定公司地理位置的緯度和經度。
文法：
HTML 對每個標籤都有通用語法來開發網頁內容。
<html>
<body>
<script src="google-api url">
function()
{
}
</script>
</body>
</html>
HTML Google 地圖的語法是在 script 標籤中新增 Google API，然後我們將設定網頁內容的地理位置。我們可以將一些HTML元素和屬性對齊並使用到網頁中來吸引用戶，這將是公司和業務的成長。我們將根據業務需求客製化具有使用者友善環境的網頁。
如何用 HTML 建立 Google 地圖？
我們將使用 <script> 在我們的網頁上呼叫 Google 地圖 API標籤。我們主要可以在HTML頁面新增Google地圖後設定標記；它包含三個步驟。 1. 我們會先建立一個 HTML 頁面， 2. 然後再加入標記的地圖。 3. 最後，我們將取得 API 金鑰來驗證位置。我們將根據自訂的招股說明書使用預先定義標籤建立一個 HTML 頁面，如果需要使用 <div> ，也會對齊頁面中的樣式屬性。元素;我們將在網站中使用單獨的模組視圖分隔內容。 </script>
新增標記的地圖是在網頁上建立 Google 地圖的第二個層級。本節將描述如何將 javascript API 中的地圖載入到網頁中，我們還將編寫使用 API 的 javascript 函數，為網頁添加帶有標記的地圖。當我們在腳本標籤中加入API時，回呼參數將在腳本載入地圖API後執行一些條件，例如initMap函數。如果我們在網頁腳本中使用非同步屬性，瀏覽器允許 API 載入網頁的其餘渲染頁面內容。在Google地圖API URL的腳本標籤中，我們將看到它包含API金鑰的關鍵參數。本節我們不設定任何key，會自動產生API key，然後使用帶有參數的initMap函數呼叫回呼參數。
initMap 函數將用於初始化，並在我們使用帶有腳本標籤 HTML 標籤的 javascript 函數加載網頁時添加地圖。我們將在函數中呼叫一些預設方法，例如 getElementById() 是 javascript 庫中的函數之一，用於透過分隔
我們將使用 HTML 中的預先定義標籤，例如
我們將在第三步驟在網頁上建立地圖時取得API key；該金鑰將用於驗證我們自訂的 API 金鑰中的地圖和 javascript 函數。使用包含用於建立 API 金鑰的選項的 Google Cloud Platform 控制台工具。
HTML Google 地圖範例
以下是 HTML Google 地圖的範例：
範例#1
代碼：
<html>
<body>
<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>
輸出：
範例#2
代碼：
<html>
<head>
<style>
#m {
height: 403px;
width: 102%;
}
</style>
</head>
<body>
<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
輸出：
範例#3
代碼：
<!DOCTYPE html>
<html>
<body>
<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>
輸出：
在上面的範例中，我們使用三種不同樣式的 Google 地圖，並透過預先定義的 HTML 元素、屬性和 JavaScript 函數來呼叫網頁中的地圖 API。
結論
使用文件的地圖 API 來辨識 javascript 函數中的位置。它完全基於感測器。當我們在Google地圖中使用手機時，我們將啟用該位置僅獲取從來源位置到目的地方向的資料。我們還檢查應用程式是否接受感測器來檢測用戶位置並檢查瀏覽器相容性問題感測器參數未長時間使用。
以上是HTML Google地圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！