Cara menggunakan JS dan Peta Baidu untuk melaksanakan fungsi tetingkap maklumat peta-tutorial js-php.cn

Cara menggunakan JS dan Peta Baidu untuk melaksanakan fungsi tetingkap maklumat peta

PHPz

Lepaskan： 2023-11-21 17:33:47

asal

1288 orang telah melayarinya

Cara menggunakan JS dan Peta Baidu untuk melaksanakan fungsi tetingkap maklumat peta

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi tetingkap maklumat peta

Tetingkap maklumat peta ialah tetingkap timbul yang memaparkan maklumat terperinci pada peta Ia boleh digunakan untuk memaparkan nama, alamat, kenalan nombor dan maklumat lain sesuatu tempat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi tetingkap maklumat peta dan memberikan contoh kod khusus.

Pertama sekali, kami perlu memperkenalkan fail JS Peta Baidu ke dalam fail HTML Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图信息窗口示例</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
    <style>
        #mapContainer {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami memperkenalkan fail JS Peta Baidu melalui tag , dan tetapkan lebar dan tinggi bekas peta menggunakan gaya CSS. <script>标签引入了百度地图的JS文件，并使用CSS样式为地图容器设置了宽度和高度。

接下来，我们在JS文件中编写代码来实现地图信息窗口功能。首先，我们需要创建地图实例并设置地图的中心点和缩放级别，代码如下：

// 创建地图实例
var map = new BMap.Map("mapContainer");
// 设置地图中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);

Salin selepas log masuk

接下来，我们可以在地图上添加标记，并为每个标记设置点击事件，代码如下：

// 创建标记
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
// 将标记添加到地图上
map.addOverlay(marker);
// 设置标记的点击事件
marker.addEventListener("click", function() {
    // 创建信息窗口
    var infoWindow = new BMap.InfoWindow("这是一个标记的信息窗口");
    // 打开信息窗口
    map.openInfoWindow(infoWindow, marker.getPosition());
});

Salin selepas log masuk

在上面的代码中，我们创建了一个标记，并为标记的点击事件添加了一个回调函数。在回调函数中，我们创建了一个信息窗口，并设置了窗口中显示的内容。最后，我们将信息窗口添加到地图上，并通过map.openInfoWindow()

Seterusnya, kami menulis kod dalam fail JS untuk melaksanakan fungsi tetingkap maklumat peta. Mula-mula, kita perlu membuat contoh peta dan menetapkan titik tengah dan tahap zum peta, kodnya adalah seperti berikut:

// 创建信息窗口
var infoWindow = new BMap.InfoWindow("<div>" +
    "<h3>地点名称</h3>" +
    "<p>地址：XXX</p>" +
    "<p>联系电话：XXX</p>" +
    "</div>");
// 打开信息窗口
map.openInfoWindow(infoWindow, marker.getPosition());

Salin selepas log masuk

Seterusnya, kita boleh menambah penanda pada peta dan menetapkan acara klik untuk setiap penanda, kodnya ialah seperti berikut:

rrreee

Dalam Dalam kod di atas, kami mencipta penanda dan menambah fungsi panggil balik untuk acara klik penanda. Dalam fungsi panggil balik, kami mencipta tetingkap maklumat dan menetapkan kandungan yang dipaparkan dalam tetingkap. Akhir sekali, kami menambah tetingkap maklumat pada peta, membuka tetingkap maklumat melalui kaedah map.openInfoWindow() dan menetapkan kedudukan tetingkap kepada kedudukan yang ditanda.

Untuk memaparkan maklumat yang lebih terperinci, kami boleh menambah lebih banyak elemen HTML pada tetingkap maklumat Contoh kod adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami menambah maklumat seperti tajuk, alamat, dan nombor hubungan pada tetingkap maklumat. . 🎜🎜Di atas ialah contoh kod khusus menggunakan JS dan API Peta Baidu untuk melaksanakan fungsi tetingkap maklumat peta. Anda boleh menyesuaikan apa yang dipaparkan dalam tetingkap maklumat mengikut keperluan anda dan menambah lebih banyak acara dan fungsi pada penanda. Saya harap artikel ini dapat membantu anda melaksanakan fungsi tetingkap maklumat peta. 🎜

Atas ialah kandungan terperinci Cara menggunakan JS dan Peta Baidu untuk melaksanakan fungsi tetingkap maklumat peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!