Verwendung der Baidu Map API zur Implementierung regionaler Kartenvisualisierung und Layer-Overlay in PHP-PHP-Tutorial-php.cn

Verwendung der Baidu Map API zur Implementierung regionaler Kartenvisualisierung und Layer-Overlay in PHP

WBOY

Freigeben： 2023-07-30 12:34:01

Original

1039 Leute haben es durchsucht

Verwenden Sie die Baidu Map API in PHP, um die Visualisierung und Ebenenüberlagerung von Gebietskarten zu realisieren.

Einführung:
Mit der Entwicklung der Zeit sind Karten zu einem unverzichtbaren Bestandteil unseres Lebens geworden. Auch in der Webentwicklung findet der Einsatz von Map API immer mehr Verbreitung. In diesem Artikel wird erläutert, wie Sie mit PHP und der Baidu Map API Gebietskarten visualisieren und Layer-Overlay-Vorgänge durchführen.

1. Vorbereitung
Bevor wir beginnen, müssen wir einige Dinge vorbereiten:

Baidu Map-Entwicklerkonto: Wir müssen ein Entwicklerkonto auf der Baidu Map Open Platform registrieren und eine Anwendung erstellen.
PHP-Serverumgebung: Unser Code muss in einer PHP-Serverumgebung ausgeführt werden. Stellen Sie sicher, dass Sie die Einrichtung der Umgebung abgeschlossen haben.

2. Besorgen Sie sich den Baidu Map API-Schlüssel

Melden Sie sich bei der offenen Baidu Map-Plattform an und rufen Sie die Konsolenoberfläche auf.
Erstellen Sie eine Bewerbung und geben Sie relevante Informationen wie den Bewerbungsnamen und die Rückrufadresse ein.
Nach erfolgreicher Erstellung finden Sie den von uns benötigten Baidu Map API-Schlüssel auf der Seite mit den Anwendungsdetails.

3. Erstellen Sie eine Kartenseite

Erstellen Sie eine PHP-Datei, nennen Sie sie „map.html“ und fügen Sie die folgende grundlegende HTML-Struktur hinzu:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域图可视化</title>
    <style type="text/css">
        /* 设置地图容器的宽高 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Nach dem Login kopieren

Stellen Sie die JavaScript-Bibliothek und Stildateien von Baidu Map vor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区域图可视化</title>
    <style type="text/css">
        /* 设置地图容器的宽高 */
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Nach dem Login kopieren

4 , Gebietskarte zeichnen

Verwenden Sie im JavaScript-Teil die Map-Klasse der Baidu Map API, um ein Kartenobjekt zu erstellen:

var map = new BMap.Map("map");

Nach dem Login kopieren

Legen Sie den Mittelpunkt und die Zoomstufe der Karte fest:

map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);

Nach dem Login kopieren

Hinzufügen und zeichnen ein Bereich:

var polygon = new BMap.Polygon([
    new BMap.Point(116.387112,39.920977),
    new BMap.Point(116.385243,39.913063),
    new BMap.Point(116.394226,39.917988)
], {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5}); // 设置区域的样式
map.addOverlay(polygon);

Nach dem Login kopieren

5. Ebenenüberlagerung
Es gibt viele Möglichkeiten, eine Kartenüberlagerung hinzuzufügen. In diesem Artikel wird das Hinzufügen eines Maus-Zeichenwerkzeugs als Beispiel betrachtet:

Erstellen Sie im JavaScript-Teil ein Maus-Zeichenwerkzeug und binden Sie es zur Karte:

var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: true, // 是否开启绘制模式
    enableDrawingTool: true, // 是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, // 工具栏的位置
        offset: new BMap.Size(5, 5), // 工具栏的偏移量
        drawingModes: [
            BMAP_DRAWING_POLYGON // 仅显示多边形绘制工具
        ]
    }
});

Nach dem Login kopieren

Zeichnungsabschlussereignis anhören, die gezeichneten Bereichskoordinaten abrufen:

drawingManager.addEventListener('polygoncomplete', function(polygon) {
    var overlay = polygon.getPath(); // 获取绘制的区域坐标
    // 执行其他操作，比如将坐标传给后端进行处理等
});

Nach dem Login kopieren

6. Vollständiges Codebeispiel




    
    区域图可视化

Nach dem Login kopieren

Fazit:
Durch die obigen Schritte haben wir PHP und die Baidu-Karten-API erfolgreich zur Realisierung verwendet die Visualisierung und Ebenenüberlagerung der Gebietskarte. Sie können den Stil der gezeichneten Gebietskarte anpassen oder das Gebiet nach Ihren eigenen Bedürfnissen bearbeiten. Ich wünsche Ihnen viel Spaß bei der Nutzung!

Das obige ist der detaillierte Inhalt vonVerwendung der Baidu Map API zur Implementierung regionaler Kartenvisualisierung und Layer-Overlay in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!