Aktueller Standort: Startseite> Neueste Artikel> So implementieren Sie die MAP -Skala Anzeige und Steuerung der Baidu -Karten -API in PHP

So implementieren Sie die MAP -Skala Anzeige und Steuerung der Baidu -Karten -API in PHP

M66 2025-09-22

Einführung

Die MAP -Skala ist eine übliche Steuerung in MAP -Anwendungen. Es wird verwendet, um die Skalierungsbeziehung der Karte anzuzeigen und den Benutzern die Beziehung zwischen der Zoomebene und der tatsächlichen Entfernung der Karte zu verstehen. In der PHP -Entwicklung ist die Kombination von Baidu -Karten -API, um die Anzeige und Kontrolle von Kartenskalen zu realisieren, eine sehr praktische Fähigkeit. In diesem Artikel wird ausführlich eingeführt, wie die Baidu -MAP -API verwendet wird, um diese Funktion in der PHP -Umgebung zu implementieren.

Einführung der Baidu Map -API

Bei der Verwendung von Baidu Map-API müssen Sie zunächst die JavaScript-Bibliothek von Baidu Map einführen und Dateien des CSS-Stils im Karten-Skala auf der HTML-Seite im CSS-Stil einführen. Es kann direkt über den von der Baidu Map Open Platform bereitgestellten CDN -Link eingeführt werden.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Beispiel für Kartenskala</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Ihre Baidu -KarteAPISchlüssel"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
</body>
</html>

Initialisieren Sie die Karte und setzen Sie Skalensteuerelemente

Als nächstes verwenden wir den PHP -Code, um die Karte zu initialisieren und die Maßstabskontrolle zur Karte hinzuzufügen. Durch die Baidu Maps API können wir diese Funktion problemlos implementieren. Hier finden Sie einen Beispielcode zum Initialisieren der Karte und zum Hinzufügen einer Skalensteuerung:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Beispiel für Kartenskala</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Ihre Baidu -KarteAPISchlüssel"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <script>
        var map = new BMap.Map("map"); // Erstellen Sie eine Karteninstanz
        var point = new BMap.Point(116.404, 39.915); // Punktkoordinaten erstellen
        map.centerAndZoom(point, 15); // Initialisieren Sie die Karte，Stellen Sie den Mittelpunkt und den Zoomebene ein

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // Erstellen Sie eine Skalensteuerung
        map.addControl(scaleControl); // Skalensteuerung hinzufügen
    </script>
</body>
</html>

Dynamische Steuerskala -Steuerung und ausblenden

Zusätzlich zum Hinzufügen von Skalensteuerungen während der Initialisierung können wir auch die Anzeige und das Verstecken von Skalierungssteuerungen durch Tasten dynamisch steuern. Hier finden Sie ein Beispiel für das Umschalten des Anzeigestatus der Skalierungssteuerung über eine Taste:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Beispiel für Kartenskala</title>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/ScaleControl/1.4/src/ScaleControl_min.css" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Ihre Baidu -KarteAPISchlüssel"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <button onclick="toggleScaleControl()">Skala umschalten</button>
    <script>
        var map = new BMap.Map("map"); // Erstellen Sie eine Karteninstanz
        var point = new BMap.Point(116.404, 39.915); // Punktkoordinaten erstellen
        map.centerAndZoom(point, 15); // Initialisieren Sie die Karte，Stellen Sie den Mittelpunkt und den Zoomebene ein

        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); // Erstellen Sie eine Skalensteuerung
        map.addControl(scaleControl); // Skalensteuerung hinzufügen

        function toggleScaleControl() {
            if (scaleControl.isVisible()) {
                map.removeControl(scaleControl); // Skalierungssteuerung ausblenden
            } else {
                map.addControl(scaleControl); // Skalenkontrolle anzeigen
            }
        }
    </script>
</body>
</html>

Zusammenfassen

Über den obigen Beispielcode können wir die Anzeige- und Steuerfunktionen der Kartenskala -Steuerung der Baidu -Karten -API in der PHP -Umgebung erfolgreich erkennen. Dies hilft den Benutzern nicht nur, den MAP -Zoom besser zu verstehen, sondern verbessert auch die Benutzererfahrung. Entwickler können diese Codes entsprechend ihren Bedürfnissen ändern und erweitern.

  • Verwandte Tags:

    API
Ähnlich
Neueste Artikel