How to use JS and Baidu Maps to implement map ranging function

How to use JS and Baidu Maps to implement the map ranging function, you need specific code examples

The map ranging function is to measure the distance between two points on the map. In front-end development, you can use JS combined with Baidu Map API to implement this function.

First, we need to introduce the API library of Baidu Maps. It can be introduced by adding the following code in the HTML file:

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

where your_ak is your Baidu Map developer key, you need to go to [Baidu Map Open Platform] (https:/ /lbsyun.baidu.com/) apply.

Next, we need to create the map container. Add a container element in the HTML file, such as:

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

Then, in the JS file, we can use Baidu Map’s Map, Marker and Polyline class to implement map ranging function.

First, we need to create the map object and display it in the container. The code is as follows:

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

Then, we need to add two marker points on the map. One mark point represents the starting point of the distance measurement, and the other mark point represents the end point of the distance measurement. The code is as follows:

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

After adding the marker points, we need to draw a connecting line on the map to represent the distance measurement. We can use the Polyline class to achieve this. The code is as follows:

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

Finally, we can calculate the distance between two points and display it on the page. The code is as follows:

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

At this point, we have completed all the code for using JS and Baidu Maps to implement the map ranging function.

In the HTML file, we can add a button to trigger the function that calculates the distance. The code is as follows:

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

Through the above steps, we have realized the map ranging function. Users can click two points on the map and then click the Calculate Distance button to display the distance between the two points on the page.

I hope this article will help you understand how to use JS and Baidu Maps to implement the map ranging function. If you have any questions, please feel free to ask.

The above is the detailed content of How to use JS and Baidu Maps to implement map ranging function. For more information, please follow other related articles on the PHP Chinese website!