Gunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi pertanyaan kemudahan sekeliling pada peta-tutorial js-php.cn

Gunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi pertanyaan kemudahan sekeliling pada peta

PHPz

Lepaskan： 2023-11-21 15:53:14

asal

1108 orang telah melayarinya

Gunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi pertanyaan kemudahan sekeliling pada peta

Gunakan Peta JavaScript dan Tencent untuk melaksanakan fungsi pertanyaan kemudahan sekeliling pada peta

Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat Internet dan peranti mudah alih, perkhidmatan peta telah menjadi semakin penting dalam kehidupan orang ramai. Sama ada navigasi perjalanan, pertanyaan kemudahan sekitar atau perkongsian lokasi, perkhidmatan peta memainkan peranan yang sangat diperlukan. Di antara banyak perkhidmatan peta, Peta Tencent disukai oleh majoriti pengguna kerana kedudukannya yang tepat dan fungsi yang kaya. Artikel ini akan memperkenalkan cara menggunakan JavaScript dan Peta Tencent untuk melaksanakan peta yang mengelilingi fungsi pertanyaan kemudahan dan memberikan contoh kod yang sepadan.

1. Persediaan awal
Sebelum melaksanakan fungsi menanyakan kemudahan sekeliling pada peta, kita perlu melakukan beberapa persediaan terlebih dahulu. Pertama, kita perlu mendaftar akaun pembangun pada platform terbuka Peta Tencent dan membuat aplikasi. Alamat pendaftaran ialah: https://lbs.qq.com/. Selepas pendaftaran selesai, kami boleh mendapatkan kunci pembangun (kunci), yang digunakan untuk pengesahan apabila memanggil API Peta Tencent.

2. Pembinaan halaman HTML
Apabila membina halaman HTML, kami perlu memperkenalkan kod Tencent Maps JavaScript API yang berkaitan. Tambahkan kod berikut pada halaman HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图周边设施查询</title>
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script src="https://map.qq.com/api/js?v=2.exp&key=开发者密钥"></script>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Antaranya, Developer Key perlu digantikan dengan kunci sebenar yang anda perolehi pada Tencent Map Open Platform. 开发者密钥 需要替换为你在腾讯地图开放平台上获取的实际密钥。

三、JavaScript代码的编写
在 JavaScript 代码中，我们将通过调用腾讯地图 API 实现地图的初始化、定位以及周边设施查询功能。创建一个 script.js 文件，将以下代码复制进去：

// 创建地图实例
var map = new qq.maps.Map(document.getElementById("map"), {
    zoom: 13, // 设置地图缩放级别
});

// 获取用户当前位置
navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude; // 获取纬度
    var lng = position.coords.longitude; // 获取经度

    // 将地图中心点设置为用户当前位置
    map.setCenter(new qq.maps.LatLng(lat, lng));

    // 在地图上添加当前位置的标记
    new qq.maps.Marker({
        position: new qq.maps.LatLng(lat, lng),
        map: map,
    });
});

// 在地图上进行周边设施查询
function searchNearby(keyword) {
    var service = new qq.maps.SearchService({
        map: map,
    });

    // 根据关键词进行周边查询
    service.searchNearBy(keyword, map.getCenter(), 1000);
}

// 为搜索按钮绑定事件
document.getElementById("search-btn").addEventListener("click", function() {
    var keyword = document.getElementById("search-input").value;
    searchNearby(keyword);
});

Salin selepas log masuk

在这段代码中，首先创建了一个地图实例，并将其显示在页面上的 map 容器中。接着，通过调用 navigator.geolocation.getCurrentPosition() 方法获取用户的当前位置，并将地图中心点定位于用户所在位置。然后，在地图上添加了一个标记，标记用户当前位置。

最后，定义了一个 searchNearby() 函数，该函数接收一个关键词作为参数，并通过调用 qq.maps.SearchService 的 searchNearBy() 方法进行周边设施查询。查询范围为当前地图中心点附近1千米的区域。

为了触发地图查询，我们添加了一个搜索按钮，并通过 addEventListener 方法为其绑定了一个点击事件，该事件会调用 searchNearby()

3. Menulis kod JavaScript

Dalam kod JavaScript, kami akan melaksanakan fungsi pemulaan peta, kedudukan dan pertanyaan kemudahan sekeliling dengan memanggil Tencent Map API. Cipta fail script.js dan salin kod berikut ke dalamnya:
rrreee

Dalam kod ini, tika peta dibuat dan dipaparkan dalam peta pada halaman. kod> bekas. Seterusnya, dapatkan lokasi semasa pengguna dengan memanggil kaedah navigator.geolocation.getCurrentPosition() dan letakkan titik tengah peta di lokasi pengguna. Kemudian, penanda ditambahkan pada peta yang menandakan lokasi semasa pengguna.

Akhir sekali, fungsi searchNearby() ditakrifkan, yang menerima kata kunci sebagai parameter dan memanggil searchNearBy() daripada <code>qq.maps.SearchService kaedah untuk menanyakan kemudahan sekeliling. Julat pertanyaan ialah kawasan 1 km berhampiran pusat peta semasa.

🎜Untuk mencetuskan pertanyaan peta, kami menambahkan butang carian dan mengikat peristiwa klik padanya melalui kaedah addEventListener, yang akan memanggil fungsi searchNearby() operasi. Pada masa yang sama, kami menyediakan kotak input untuk butang carian untuk memasukkan kata kunci carian. 🎜🎜4. Demonstrasi Kesan🎜Selepas melengkapkan penulisan kod di atas, kami memuat semula halaman dan melihat peta berdasarkan Peta Tencent dipaparkan pada halaman. Selain itu, titik tengah peta akan diletakkan secara automatik ke lokasi pengguna semasa. Pada masa ini, kami boleh memasukkan kata kunci (seperti restoran, bank, sekolah, dll.) dalam kotak input, dan kemudian klik butang carian untuk melihat penanda kemudahan berdekatan dengan kata kunci yang sepadan pada peta. 🎜🎜Ringkasan🎜Artikel ini memperkenalkan cara menggunakan JavaScript dan Peta Tencent untuk melaksanakan peta yang mengelilingi fungsi pertanyaan kemudahan. Dengan memanggil API Peta Tencent, kami boleh memaparkan peta dengan mudah pada halaman dan menyediakan pengguna dengan perkhidmatan peta yang mudah dengan mendapatkan lokasi semasa pengguna dan mencari kemudahan sekitar. Saya harap artikel ini dapat membantu anda, dan semua orang dialu-alukan untuk mencuba dan mengaplikasikannya pada projek anda sendiri. 🎜

Atas ialah kandungan terperinci Gunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi pertanyaan kemudahan sekeliling pada peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!