JS と Baidu Maps を使用して地図測距機能を実装する方法-jsチュートリアル-php.cn

JS と Baidu Maps を使用して地図測距機能を実装する方法

PHPz

リリース： 2023-11-21 12:26:13

オリジナル

1303 人が閲覧しました

JS と Baidu Maps を使用して地図測距機能を実装する方法

JS と Baidu Maps を使用して地図測距関数を実装する方法。具体的なコード例が必要です。

地図測距関数は、地図上の 2 点間の距離を測定します。地図。フロントエンド開発では、JS と Baidu Map API を組み合わせてこの機能を実装できます。

まず、Baidu Maps の API ライブラリを導入する必要があります。これは、HTML ファイルに次のコードを追加することで導入できます:

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

ログイン後にコピー

ここで、your_ak は Baidu Map 開発者キーです。[Baidu Map Open Platform] (https: / /lbsyun.baidu.com/) が適用されます。

次に、マップコンテナを作成する必要があります。 HTML ファイルに次のようなコンテナ要素を追加します。

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

ログイン後にコピー

次に、JS ファイルで、Baidu Map の Map、Marker、および を使用できます。マップレンジング機能を実装する Polyline クラス。

まず、マップオブジェクトを作成し、コンテナーに表示する必要があります。コードは次のとおりです。

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

ログイン後にコピー

次に、マップ上に 2 つのマーカーポイントを追加する必要があります。一方のマーク点は距離測定の開始点を表し、もう一方のマーク点は距離測定の終了点を表します。コードは次のとおりです。

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();
  }
});

ログイン後にコピー

マーカーポイントを追加した後、距離の測定値を表す接続線を地図上に描画する必要があります。これを実現するには、Polyline クラスを使用します。コードは次のとおりです。

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);
}

ログイン後にコピー

最後に、2 点間の距離を計算してページに表示できます。コードは次のとおりです。

function calculateDistance(){
  if(startPoint && endPoint){
    var distance = map.getDistance(startPoint, endPoint).toFixed(2);
    document.getElementById("distance").innerHTML = "距离：" + distance + "米";
  }
}

ログイン後にコピー

この時点で、JS と Baidu Maps を使用して地図測距機能を実装するためのコードがすべて完成しました。

HTML ファイルに、距離を計算する関数をトリガーするボタンを追加できます。コードは次のとおりです。

<button onclick="calculateDistance()">计算距离</button>
<p id="distance"></p>

ログイン後にコピー

以上の手順により、地図測距機能を実現しました。ユーザーはマップ上の 2 点をクリックし、[距離の計算] ボタンをクリックすると、ページ上の 2 点間の距離が表示されます。

この記事が、JS と Baidu Maps を使用して地図測距機能を実装する方法を理解するのに役立つことを願っています。ご質問がございましたら、お気軽にお問い合わせください。

以上がJS と Baidu Maps を使用して地図測距機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。