Gunakan PHP dan API Peta Baidu untuk merealisasikan interaksi dan pengoptimuman navigasi laluan-tutorial php-php.cn

Gunakan PHP dan API Peta Baidu untuk merealisasikan interaksi dan pengoptimuman navigasi laluan

WBOY

Lepaskan： 2023-07-29 18:40:01

asal

1590 orang telah melayarinya

Gunakan API Peta PHP dan Baidu untuk merealisasikan interaksi dan pengoptimuman navigasi laluan

Dalam masyarakat moden, dengan popularisasi pengangkutan dan pembangunan bandar, navigasi laluan telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Untuk memudahkan navigasi laluan pengguna pada halaman web, kami boleh menggunakan PHP dan API Peta Baidu untuk mencapai interaksi dan pengoptimuman.

API Peta Baidu menyediakan pelbagai fungsi, termasuk pengekodan geo, perancangan laluan, carian lokasi, dsb. Dengan menggabungkan dengan PHP, kami boleh melaksanakan fungsi navigasi laluan dinamik dan memberikan pengguna pengalaman perjalanan yang lebih mudah.

Pertama, kami perlu menyediakan antara muka pengguna untuk memaparkan peta dan kotak input navigasi. Katakan kami mempunyai fail HTML yang mengandungi kod berikut:

<!DOCTYPE html>
<html>
<head>
    <title>路线导航</title>
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <h1>路线导航</h1>
    <input type="text" id="origin" placeholder="起点">
    <input type="text" id="destination" placeholder="终点">
    <button onclick="navigate()">导航</button>

    <div id="map"></div>

    <script src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan kotak input lokasi untuk memasukkan titik mula dan titik tamat serta butang navigasi. Antaranya, API Peta Baidu diperkenalkan dalam teg skrip, dan logik navigasi diproses dalam fail script.js.

Seterusnya, kita perlu berinteraksi dengan API Peta Baidu dalam fail PHP, mendapatkan hasil perancangan laluan dan mengembalikannya ke halaman hujung hadapan. Katakan kita mempunyai fail bernama navigate.php yang mengandungi kod berikut: navigate.php的文件，包含以下代码：

<?php
$origin = $_GET['origin'];
$destination = $_GET['destination'];

// 使用百度地图API进行路径规划
$url = "http://api.map.baidu.com/directionlite/v1/transit?origin=".$origin."&destination=".$destination."&ak=YOUR_API_KEY";
$response = file_get_contents($url);
$data = json_decode($response, true);

// 返回路径规划结果
echo json_encode($data);
?>

Salin selepas log masuk

在上述代码中，我们首先获取从前端页面传递过来的起点和终点信息。然后，我们使用百度地图API的路径规划功能生成一个URL。通过使用file_get_contents

function navigate() {
    var origin = document.getElementById('origin').value;
    var destination = document.getElementById('destination').value;

    // 发送HTTP请求获取路径规划结果
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var result = JSON.parse(this.responseText);

            // 处理路径规划结果
            // ...

            // 在地图上显示路径
            // ...
        }
    };
    xhr.open("GET", "navigate.php?origin=" + origin + "&destination=" + destination, true);
    xhr.send();
}

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mendapatkan maklumat titik mula dan titik akhir yang dihantar dari halaman hujung hadapan. Kemudian, kami menggunakan fungsi perancangan laluan API Peta Baidu untuk menjana URL. Dapatkan hasil respons API Peta Baidu dengan menggunakan fungsi file_get_contents dan menghuraikan hasilnya ke dalam format JSON. Akhir sekali, kami mengembalikan hasil perancangan laluan ke halaman hujung hadapan.

Kini, kita perlu mengendalikan logik navigasi dalam fail script.js. Katakan kita mempunyai kod berikut:

// 处理路径规划结果
var steps = result.result.routes[0].steps;

// 绘制线路
var map = new BMap.Map("map");
var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
for (var i = 0; i < steps.length; i++) {
    var path = steps[i].path;
    var polyline = new BMap.Polyline(path.split(";").map(function (pointStr) {
        var pointArr = pointStr.split(",");
        return new BMap.Point(pointArr[0], pointArr[1]);
    }), { strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5 });
    map.addOverlay(polyline);
}

Salin selepas log masuk

Dalam kod di atas, kita mula-mula mendapatkan maklumat mula dan tamat yang dimasukkan di halaman hujung hadapan. Kami kemudian menggunakan objek XMLHttpRequest untuk menghantar permintaan HTTP ke fail navigate.php dan menghantar maklumat titik mula dan tamat sebagai parameter pertanyaan kepada fail PHP. Selepas memperoleh keputusan perancangan laluan, kami boleh memprosesnya mengikut keperluan, seperti menghuraikan maklumat laluan dan memaparkannya pada peta.

Akhir sekali, kami perlu memaparkan maklumat laluan dan peta di muka hadapan. Kita boleh menggunakan fungsi garisan garisan API Peta Baidu untuk memaparkan laluan. Kod khusus adalah seperti berikut:

rrreee

Dalam kod di atas, kami mula-mula memperoleh semua langkah daripada hasil perancangan laluan. Kemudian, kami menggunakan BMap.DrivingRoute untuk memulakan peta dan menggunakan gelung untuk melintasi maklumat laluan setiap langkah dan mencipta BMap.Polyline yang sepadan untuk melukis laluan.

Melalui contoh kod di atas, kami boleh menggunakan PHP dan API Peta Baidu untuk merealisasikan interaksi dan pengoptimuman navigasi laluan. Pengguna boleh memasukkan titik permulaan dan destinasi pada halaman hujung hadapan dan klik butang navigasi Sistem secara automatik akan merancang laluan terbaik berdasarkan maklumat titik permulaan dan destinasi yang dimasukkan oleh pengguna dan memaparkannya pada peta. Dengan cara ini, pengguna boleh menavigasi laluan dengan mudah dan meningkatkan kecekapan dan keselesaan perjalanan. 🎜

Atas ialah kandungan terperinci Gunakan PHP dan API Peta Baidu untuk merealisasikan interaksi dan pengoptimuman navigasi laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!