How to use JS and Baidu Maps to implement map pan function-JS Tutorial-php.cn

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

PHPz

Release： 2023-11-21 10:00:35

Original

1401 people have browsed it

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

How to use JS and Baidu Map to implement map pan function

Baidu Map is a widely used map service platform, often used to display geographical information in Web development , positioning and other functions. This article will introduce how to use JS and Baidu Map API to implement the map pan function, and provide specific code examples.

1. Preparation
Before using Baidu Map API, you first need to apply for a developer account on Baidu Map Open Platform (http://lbsyun.baidu.com/) and create an application. After the creation is completed, you will get your own AK (Access Key), which will be used as the identity for each request.

2. Introduce Baidu Map API
Introduce the script file of Baidu Map API in the

tag of the HTML file. The code is as follows:

<head>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAK"></script>
</head>

Copy after login

Replace yourAK in the above code For your own AK.

3. Create a map container
Create a container element in the HTML file to display the map. You can assign an id to this container so that the container can be obtained by id in the following code. The code is as follows:

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

Copy after login

4. Initialize the map
Initialize the map object in the JS file, the code is as follows:

var map = new BMap.Map("mapContainer");

Copy after login

Replace mapContainer in the code with the id of the map container you created .

5. Set the map center point
Set the initial center point of the map. The code is as follows:

var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

Copy after login

Among them, 116.404 is the longitude and 39.915 is the latitude. The center point can be set according to actual needs. coordinate of.

6. Implement the map pan function
Next, we need to add two buttons to the page to trigger the map pan operation. The code is as follows:

<button onclick="panLeft()">向左移动</button>
<button onclick="panRight()">向右移动</button>

Copy after login

Then, implement the logic of the panning function in the JS file. The code is as follows:

function panLeft() {
  var mapCenter = map.getCenter();
  var newCenter = new BMap.Point(mapCenter.lng - 0.1, mapCenter.lat);
  map.panTo(newCenter);
}

function panRight() {
  var mapCenter = map.getCenter();
  var newCenter = new BMap.Point(mapCenter.lng + 0.1, mapCenter.lat);
  map.panTo(newCenter);
}

Copy after login

Here, the panLeft() function is used to pan the map to the left, and the panRight() function Used to pan the map to the right. In the code, the center point coordinates of the current map are obtained through the map.getCenter() method, then a new coordinate newCenter is created, and the center point of the map is moved to the new coordinates through the map.panTo() method.

7. Improve the map display
Finally, we need to call the map.enableScrollWheelZoom() method in the JS file to support the wheel zoom function. The code is as follows:

map.enableScrollWheelZoom(true);

Copy after login

8. Sample code
The following is the complete sample code:




  
  地图平移示例
  



  <div id="mapContainer" style="width: 100%; height: 500px;"></div>

Copy after login

Save the above code as an HTML file, and then open the file in the browser, that is You can see a map display page with map pan function. Click the action button and the map will pan left or right accordingly.

Summary
This article introduces how to use JS and Baidu Map API to implement the map pan function, and provides specific code examples. Through these sample codes, you can quickly get started using the Baidu Map API and implement the map pan function to meet your own needs.

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