Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian dalam kawasan peta-tutorial js-php.cn

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian dalam kawasan peta

PHPz

Lepaskan： 2023-11-21 10:53:17

asal

1174 orang telah melayarinya

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi carian dalam kawasan peta

Dengan perkembangan pesat Internet mudah alih, aplikasi peta telah menjadi salah satu alat yang amat diperlukan dalam kehidupan seharian manusia. Di antara banyak aplikasi peta, Peta Baidu adalah salah satu yang paling popular. Peta Baidu menyediakan data peta yang kaya dan antara muka API yang berkuasa, memberikan pembangun dengan banyak kemungkinan. Artikel ini akan memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi carian dalam kawasan peta dan memberikan contoh kod khusus.

Pertama, kita perlu memperkenalkan perpustakaan JS API Peta Baidu. Masukkan kod berikut ke dalam teg HTML: 标签中引入以下代码：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的百度地图AK"></script>

Salin selepas log masuk

这里的 ak 是您在百度地图开放平台申请的密钥，如果您还没有申请，可以去[百度地图开放平台](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)申请一个。

接下来，我们需要创建一个地图容器来显示地图。在HTML的 <body> 标签中创建一个 <div> 元素，并为其设置一个唯一的 id ，如下所示：

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

Salin selepas log masuk

然后，我们可以在JS代码中通过获取该 id 来创建一个地图对象，并设置地图显示的初始中心点和缩放级别，如下所示：

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 设置地图初始中心点
map.centerAndZoom(point, 15); // 设置地图初始缩放级别

Salin selepas log masuk

这里的 BMap.Map 是百度地图API提供的地图构造函数，通过 BMap.Point 创建一个地图中心点对象，然后通过 map.centerAndZoom 方法设置地图的中心点和缩放级别。

接下来，我们需要添加一个搜索输入框和搜索按钮，用于用户输入搜索关键词和触发搜索操作。在HTML的 <body> 标签中添加以下代码：

<input type="text" id="keyword" placeholder="请输入搜索关键词">
<button onclick="search()">搜索</button>

Salin selepas log masuk

然后，在JS代码中获取用户输入的搜索关键词，并通过百度地图API的 searchInBounds 方法进行区域内的搜索，如下所示：

function search() {
  var keyword = document.getElementById("keyword").value;
  var bounds = map.getBounds(); // 获取地图可视区域范围
  var searchOptions = {
    onSearchComplete: function(results) {
      // 处理搜索结果
      console.log(results);
    }
  };
  var localSearch = new BMap.LocalSearch(map, searchOptions);
  localSearch.searchInBounds(keyword, bounds);
}

Salin selepas log masuk

这里的 map.getBounds() 方法返回地图当前可视区域的范围，BMap.LocalSearch 是百度地图API提供的本地搜索构造函数，通过 localSearch.searchInBounds 方法进行区域内的关键词搜索。

最后，我们可以在搜索结果的回调函数中处理搜索结果，比如在地图上显示搜索结果的标记点。可以使用 BMap.Marker 构造函数来创建标记点，并通过 map.addOverlay

var searchOptions = {
  onSearchComplete: function(results) {
    map.clearOverlays(); // 清除地图上的所有标记点
    for (var i = 0; i < results.getCurrentNumPois(); i++) {
      var poi = results.getPoi(i);
      var point = poi.point;
      var marker = new BMap.Marker(point); // 创建标记点
      map.addOverlay(marker); // 添加标记点到地图上
    }
  }
};

Salin selepas log masuk

ak di sini ialah kunci yang anda mohon pada Platform Terbuka Peta Baidu, jika anda mempunyai belum memohon lagi, anda boleh pergi ke [Baidu Map Open Platform](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey) untuk memohon satu.

Seterusnya, kita perlu mencipta bekas peta untuk memaparkan peta. Cipta elemen

<div> dalam teg  HTML dan tetapkan id unik untuknya, seperti ditunjukkan di bawah : rrreee
 Kemudian, kita boleh mencipta objek peta dalam kod JS dengan mendapatkan id dan menetapkan titik tengah awal dan tahap zum paparan peta, seperti yang ditunjukkan di bawah: 
rrreee🎜Di sini BMap .Map ialah pembina peta yang disediakan oleh Baidu Map API Ia mencipta objek titik tengah peta melalui BMap.Point dan kemudian lulus Kaedah map.centerAndZoom menetapkan. titik tengah dan aras zum peta. 🎜🎜Seterusnya, kami perlu menambah kotak input carian dan butang carian untuk pengguna memasukkan kata kunci carian dan mencetuskan operasi carian. Tambahkan kod berikut dalam teg  HTML: 🎜rrreee🎜 Kemudian, dapatkan kata kunci carian yang dimasukkan oleh pengguna dalam kod JS dan gunakan searchInBounds API Peta Baidu kod > Kaedah untuk mencari dalam kawasan itu, seperti yang ditunjukkan di bawah: 🎜rrreee🎜Kaedah map.getBounds() di sini mengembalikan julat kawasan kelihatan semasa peta, BMap. LocalSearch ialah Pembina carian tempatan yang disediakan oleh Baidu Map API menggunakan kaedah localSearch.searchInBounds untuk melakukan carian kata kunci di kawasan tersebut. 🎜🎜Akhir sekali, kami boleh memproses hasil carian dalam fungsi panggil balik hasil carian, seperti memaparkan titik bertanda hasil carian pada peta. Penanda boleh dibuat menggunakan pembina BMap.Marker dan ditambah pada peta melalui kaedah map.addOverlay, seperti yang ditunjukkan di bawah: 🎜rrreee🎜Pada ketika ini, kita Semua kod untuk melaksanakan fungsi carian dalam kawasan peta menggunakan JS dan API Peta Baidu telah selesai. Seterusnya, anda boleh mengoptimumkan dan mengembangkan lagi mengikut keperluan anda sendiri, seperti menambah gaya tersuai, mengklik pada penanda untuk memaparkan lebih banyak maklumat, dsb. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan API Peta JS dan Baidu untuk melaksanakan fungsi carian dalam kawasan peta dan memberikan contoh kod khusus. Menggunakan API Peta Baidu, kami boleh mencari kata kunci di kawasan tersebut dengan mudah pada peta dan memaparkan hasil carian. Saya harap artikel ini berguna dan saya doakan anda berjaya dalam pembangunan anda! 🎜

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