資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JQuery 建立簡單的地圖？
JQuery 是 JavaScript 庫中一個廣受歡迎的互動式元件，它簡化了建立線上 Web 應用程式的過程。它可以透過外掛實現互動性，並且簡單易配置。由於它與所有流行的 Web 瀏覽器相容，因此它是建立缺乏高階功能的簡單地圖的最佳選擇。
此外，它是建立 Google 地圖最常用的工具，因為可以使用 jQuery 快速輕鬆地建立基本地圖，從而為您的網站增添視覺吸引力並改善使用者體驗。
方法 1
演算法
步驟 1 建立地圖的 HTML。為此，您需要一個 div 部分來容納地圖，以及一個 ID 以在您的 jQuery 方法中引用它。
步驟 2 進行地圖樣式設定，因此請向 div 新增一些 CSS。首先設定地圖容器的一些基本屬性，例如將寬度和高度調整為任何所需的值。
步驟 3 在您的 HTML 中包含 jQuery 和 Google Maps API。新增 jQuery 和 API 的連結以直接將其包含在您的程式碼中。
步驟 4 在指令碼部分初始化地圖以使其能夠執行。
步驟 5 透過指定地圖的標記來結束您的 Google 地圖程式碼，以在頁面上顯示使用者感興趣的點。
示例
<!DOCTYPE html>
<html>
<head>
<title>
Google Map
</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function abcmap() {
var mapobj = {
center:new google.maps.LatLng(
1, 1),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Map object
var map = new google.maps.Map(
document.getElementById("mapdiv"),
mapobj
);
}
</script>
</head>
<body onload = "abcmap()">
<center>
<h2 style="color:skyblue">
<b><u>Explore The World</u></b>
</h2>
<h3>Google Maps</h3>
<div id = "mapdiv" style =
"width:500px; height:350px;">
</div>
</center>
</body>
</html>
方法 2
在此示例中，我們將使用 JQuery 建立混合 Google 地圖。混合地圖是透過指定地圖型別建立的。地圖型別是在指令碼部分指定的。建立混合地圖的程式碼與簡單地圖幾乎相同。您可以在上述示例的指令碼部分進行一些更改以更改地圖型別。
步驟 1 建立地圖的 HTML。
步驟 2 設定地圖樣式並設定其尺寸。
步驟 3 在您的 HTML 中包含 jQuery 和 Google Maps API。
步驟 4 透過指定地圖的標記新增 Google 地圖程式碼。
示例
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps Hybrid
</title>
<!-- Add Google map API source -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function hybridmap() {
var CustomOp = {
center:new google.maps.LatLng(
10, 1),
zoom:3,
mapTypeId:google.maps.MapTypeId.HYBRID
};
// Map object
var map = new google.maps.Map(
document.getElementById("mapid"),
CustomOp
);
}
</script>
</head>
<!-- Function that execute when page load -->
<body onload = "hybridmap()">
<center>
<h1 style="color:skyblue">
Explore The World
</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id = "mapid" style =
"width:500px; height:200px;">
</div>
</center>
</body>
</html>
結論
使用 jQuery 建立的簡單地圖是讓您的網站具有互動式元件的絕佳方式。您可以按照這些說明建立帶有標記的簡單地圖，既實用又美觀。掌握基礎知識後，您可以探索 Google Maps API 的更復雜功能，以建立更令人驚歎的地圖。
495 次瀏覽
