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

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi julat peta

PHPz

Lepaskan： 2023-11-21 12:26:13

asal

1321 orang telah melayarinya

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi julat peta

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi julat peta, contoh kod khusus diperlukan

Fungsi julat peta adalah untuk mengukur jarak antara dua titik pada peta. Dalam pembangunan bahagian hadapan, anda boleh menggunakan JS digabungkan dengan API Peta Baidu untuk melaksanakan fungsi ini.

Pertama, kami perlu memperkenalkan perpustakaan API Peta Baidu. Ia boleh diperkenalkan dengan menambahkan kod berikut dalam fail HTML:

<script src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script>

Salin selepas log masuk

di mana, your_ak ialah kunci pembangun Peta Baidu anda, anda perlu pergi ke [Baidu Map Open Platform](https:// lbsyun. baidu.com/) memohon. your_ak是你的百度地图开发者密钥，需要去[百度地图开放平台](https://lbsyun.baidu.com/)申请。

接下来，我们需要创建地图容器。在HTML文件中添加一个容器元素，如：

<div id="map" style="width: 100%; height: 400px;"></div>

Salin selepas log masuk

然后，在JS文件中，我们可以使用百度地图的Map、Marker和Polyline类来实现地图测距功能。

首先，我们需要创建地图对象，并将其显示在容器中。代码如下：

var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图，设置中心点和缩放级别
map.enableScrollWheelZoom(true);  // 开启鼠标滚轮缩放

Salin selepas log masuk

然后，我们需要在地图上添加两个标记点。一个标记点代表测距起点，另一个标记点代表测距终点。代码如下：

var startPoint, endPoint;
var markerStart = new BMap.Marker(startPoint);
var markerEnd = new BMap.Marker(endPoint);
map.addOverlay(markerStart);
map.addOverlay(markerEnd);

// 点击地图事件，设置测距起点和终点的坐标
map.addEventListener("click", function(e){
  if(!startPoint) {
    startPoint = e.point;
    markerStart.setPosition(startPoint);
  } else if (!endPoint) {
    endPoint = e.point;
    markerEnd.setPosition(endPoint);
    drawPolyline();
  }
});

Salin selepas log masuk

在添加标记点之后，我们需要在地图上绘制连线来表示测距。我们可以使用Polyline

Seterusnya, kita perlu mencipta bekas peta. Tambahkan elemen bekas dalam fail HTML, seperti:

var polyline;

function drawPolyline(){
  if(polyline) {
    map.removeOverlay(polyline);
  }
  var points = [startPoint, endPoint];
  polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
  map.addOverlay(polyline);
}

Salin selepas log masuk

Kemudian, dalam fail JS, kita boleh menggunakan Peta Baidu Map, Penanda dan

Polyline< /code> untuk melaksanakan fungsi julat peta. <p></p>Pertama, kita perlu mencipta objek peta dan memaparkannya dalam bekas. Kodnya adalah seperti berikut: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>function calculateDistance(){
  if(startPoint &amp;&amp; endPoint){
    var distance = map.getDistance(startPoint, endPoint).toFixed(2);
    document.getElementById(&quot;distance&quot;).innerHTML = &quot;距离：&quot; + distance + &quot;米&quot;;
  }
}</pre><div class="contentsignin">Salin selepas log masuk</div></div></p> Kemudian, kita perlu menambah dua titik penanda pada peta. Satu titik markah mewakili titik permulaan ukuran jarak, dan titik tanda yang lain mewakili titik akhir pengukuran jarak. Kodnya adalah seperti berikut: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;button onclick=&quot;calculateDistance()&quot;&gt;计算距离&lt;/button&gt;
&lt;p id=&quot;distance&quot;&gt;&lt;/p&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div>Selepas menambah titik penanda, kita perlu melukis garis penghubung pada peta untuk mewakili ukuran jarak. Kita boleh menggunakan kelas <code>Polyline

untuk mencapai ini. Kodnya adalah seperti berikut:

rrreee

Akhir sekali, kita boleh mengira jarak antara dua titik dan memaparkannya pada halaman. Kod tersebut adalah seperti berikut: 🎜rrreee🎜Pada ketika ini, kami telah melengkapkan semua kod untuk melaksanakan fungsi julat peta menggunakan Peta JS dan Baidu. 🎜🎜Dalam fail HTML, kita boleh menambah butang untuk mencetuskan fungsi yang mengira jarak. Kodnya adalah seperti berikut: 🎜rrreee🎜Melalui langkah di atas, kami telah melaksanakan fungsi julat peta. Pengguna boleh mengklik dua titik pada peta dan kemudian klik butang Kira Jarak untuk memaparkan jarak antara dua titik pada halaman. 🎜🎜Saya harap artikel ini akan membantu anda memahami cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi julat peta. Jika anda mempunyai sebarang soalan, sila berasa bebas untuk bertanya. 🎜

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