Deutsch
Deutsch
Im Zeitalter des mobilen Internets sind Kartendienste zu einem wichtigen Tool für Benutzer geworden, um geografische Informationen zu erhalten. Unabhängig davon, ob es sich um Orte, Planungswege oder die Erforschung der Umgebung handelt, die Karte bietet große Bequemlichkeit. Die Gaode Map -API bietet reichhaltige Schnittstellen, kombiniert mit den leistungsstarken Backend -Verarbeitungsfunktionen von PHP und kann problemlos eine reichhaltige interaktive Karte mit Funktionen erstellen.
Zunächst müssen Sie ein Gaode -Entwicklerkonto registrieren, eine neue Webdienstanwendung erstellen und den Entwicklerschlüssel (Schlüssel) erhalten, der eine erforderliche Voraussetzung für das Aufrufen der API ist.
Hier ist die grundlegende HTML -Struktur und den zugehörigen Code, der interaktive Karten -Tags implementiert:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für interaktive Kartenmarkierung</title>
<style>
#map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Erstellen Sie ein Kartenobjekt
var map = new AMap.Map("map", {
zoom: 13, // Stellen Sie die Map -Zoomebene ein
center: [116.397428, 39.90923] // Stellen Sie die Koordinaten des Mittelpunkts der Karte fest
});
// Fügen Sie eine Kartensteuerung hinzu
AMap.plugin(['AMap.ToolBar'], function() {
map.addControl(new AMap.ToolBar());
});
// Klicken Sie auf das Kartenereignis
map.on('click', function(e) {
// Holen Sie sich die Koordinaten des Klicks mit Breiten- und Längengrad -Koordinaten
var lnglat = e.lnglat;
var longitude = lnglat.getLng();
var latitude = lnglat.getLat();
// erstellen Marker Objekt und zur Karte hinzufügen
var marker = new AMap.Marker({
position: [longitude, latitude]
});
map.add(marker);
// Das Popup-Fenster zeigt Informationen zum Breiten- und Längengrad an
var infoWindow = new AMap.InfoWindow({
content: 'Länge：' + longitude + '<br>Breite：' + latitude
});
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
});
</script>
</body>
</html>Dieser Artikel zeigt, wie PHP mit der Gaode MAP -API kombiniert wird, um eine grundlegende interaktive Kartenmarkierungsfunktion zu implementieren. Auf dieser Grundlage können Entwickler die Routenplanung, die geografische Standortsuche und andere praktische Funktionen entsprechend ihren Bedürfnissen erweitern. Die Anwendung der Kartentechnologie kann die Benutzererfahrung erheblich verbessern und eine bequeme Anzeige und Interaktion geografischer Informationen bringen.
