So erstellen Sie eine interaktive Karte mit HTML, CSS und jQuery-js-Tutorial-php.cn

So erstellen Sie eine interaktive Karte mit HTML, CSS und jQuery

WBOY

Freigeben： 2023-10-25 09:40:59

Original

989 Leute haben es durchsucht

So erstellen Sie eine interaktive Karte mit HTML, CSS und jQuery

Map ist ein gängiges Visualisierungstool, mit dem Benutzer geografische Standorte und zugehörige Informationen leichter verstehen und durchsuchen können. Mithilfe von HTML, CSS und jQuery können wir eine interaktive Karte erstellen und einige unterhaltsame und nützliche Funktionen hinzufügen. In diesem Artikel erfahren Sie, wie Sie mit diesen Techniken Ihre eigene interaktive Karte erstellen.

Erstellen Sie die HTML-Struktur

Zuerst müssen wir die HTML-Struktur erstellen, um die Karte zu speichern. Hier ist eine grundlegende HTML-Vorlage:

<!DOCTYPE html>
<html>
<head>
    <title>交互式地图</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="map"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code haben wir ein div-Element mit dem Namen map eingeführt und es als Kartencontainer verwendet. map的div元素，并将其作为地图容器。

样式地图

为了使地图看起来更加美观和易于使用，我们可以使用CSS来添加一些样式。创建一个名为styles.css的新文件，并将以下代码复制到其中：

#map {
    height: 400px;
    width: 100%;
}

Nach dem Login kopieren

以上样式将为地图容器指定一个高度和宽度，以便它在页面上正确显示。

创建交互式地图

为了创建交互式地图，我们可以使用一些库或框架。在本例中，我们将使用jQuery和一个名为Leaflet的开源JavaScript库。Leaflet是一个功能丰富，易于使用的地图库，它提供了许多有用的功能，如地图缩放，添加标记，绘制轨迹等。

在项目文件夹中创建一个名为script.js的新文件，并将以下代码复制到其中：

$(document).ready(function(){
    // 创建地图
    var myMap = L.map('map').setView([51.505, -0.09], 13);

    // 添加地图图层
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        maxZoom: 18,
    }).addTo(myMap);

    // 添加标记
    var marker = L.marker([51.5, -0.09]).addTo(myMap);

    // 添加弹出窗口
    marker.bindPopup("<b>Hello World!</b><br>Welcome to my map.").openPopup();
});

Nach dem Login kopieren

在上述代码中，我们使用L.map函数创建了一个新的地图实例，并将其视图设置为给定的经纬度。然后，我们使用L.tileLayer函数添加一个地图图层，并指定要使用的瓦片源。最后，我们使用L.marker函数在地图上添加了一个标记，使用bindPopup

Um die Karte schöner und benutzerfreundlicher zu gestalten, können wir CSS verwenden, um einige Stile hinzuzufügen. Erstellen Sie eine neue Datei mit dem Namen styles.css und kopieren Sie den folgenden Code hinein:

Die oben genannten Stile geben dem Kartencontainer eine Höhe und Breite, damit er auf der Seite korrekt angezeigt wird.

Interaktive Karten erstellen

script.js

L.map Die Funktion erstellt eine neue Karteninstanz und stellt deren Ansicht auf den angegebenen Breiten- und Längengrad ein. Anschließend fügen wir mit der Funktion <code>L.tileLayer

L.marker

bindPopup

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine interaktive Karte mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!