Home > Article > Web Front-end > How to use JS and Amap to implement location trajectory drawing function

How to use JS and Amap to implement location trajectory drawing function

PHPzOriginal: 2023-11-21 09:05:271187browse

Abstract: This article will introduce how to use JavaScript to write code and combine Amap API to implement location trajectory drawing Function. Through the drawing function of Amap, we can draw trajectories between locations based on longitude and latitude coordinates, providing users with a more intuitive display of geographical information.

Keywords: JavaScript, Amap, location trajectory drawing

1. Introducing the Amap API and related component libraries

First, we need to introduce it into the HTML page The JS files of the Amap API, as well as other component libraries that need to be used, such as jQuery, etc. It can be introduced in the following ways:

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Among them, YOUR_API_KEY needs to be replaced with the API Key you applied for on the Amap Developer Platform.

2. Create a map container

In HTML, create a div container to display the map. The sample code is as follows:

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

3. Initialize the map

In JavaScript, use the init method of the AMap object to initialize the map. The sample code is as follows:

var map = new AMap.Map('mapContainer', {
   zoom: 13, // 地图缩放级别
   center: [116.397428, 39.90923] // 地图中心点经纬度
});

zoom represents the zoom level of the map and can be adjusted as needed. center represents the longitude and latitude of the initial center point of the map. Here we take Tiananmen Square in Beijing as an example.

4. Obtain location data

We need to obtain the longitude and latitude data of the location in order to draw the trajectory. These locations can be obtained from the back-end interface, or hard-coded in the front-end.

Create an array containing the longitude and latitude of the location and name it locations. The sample code is as follows:

var locations = [
   {longitude: 116.397428, latitude: 39.90923},
   {longitude: 116.406465, latitude: 39.907961},
   {longitude: 116.4123, latitude: 39.9041},
   // ...
];

Each location has two attributes: longitude and latitude, which represent longitude and latitude respectively.

5. Draw location trajectories

Use the Polyline class of the AMap object to draw polylines on the map to represent trajectories between locations.

Create a Polyline object in JavaScript code and add it to the map. The sample code is as follows:

var path = [];
for (var i = 0; i < locations.length; i++) {
   path.push(new AMap.LngLat(locations[i].longitude, locations[i].latitude));
}

var polyline = new AMap.Polyline({
   path: path,
   isOutline: true,
   outlineColor: '#ff0000',
   strokeColor: '#3366FF',
   strokeOpacity: 1.0,
   strokeWeight: 3,
   strokeStyle: 'solid'
});

polyline.setMap(map);

This code first converts the longitude and latitude of each location into an AMap.LngLat object through a loop, and adds it to the path array.

Then, create a Polyline object and set various style properties, such as isOutline, outlineColor, strokeColor, etc.

Finally, add the Polyline object to the map and use the setMap method.

6. Complete location trajectory drawing

Through the above code, the location trajectory drawing function has been completed. Open the HTML page and the map will show the tracks between locations.

Conclusion: This article introduces how to use JavaScript and Amap API to implement the location trajectory drawing function. By drawing polylines, we can display the trajectories between locations on the map, providing users with a more intuitive display of geographic information.

Appendix: Complete code example

<!DOCTYPE html>
<html>
<head>
   <title>地点轨迹绘制</title>
   <meta charset="utf-8">
   <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style type="text/css">
      #mapContainer {
         width: 100%;
         height: 500px;
      }
   </style>
</head>
<body>
   <div id="mapContainer"></div>

   <script>
      var map = new AMap.Map('mapContainer', {
         zoom: 13,
         center: [116.397428, 39.90923]
      });

      var locations = [
         {longitude: 116.397428, latitude: 39.90923},
         {longitude: 116.406465, latitude: 39.907961},
         {longitude: 116.4123, latitude: 39.9041},
         // ...
      ];

      var path = [];
      for (var i = 0; i < locations.length; i++) {
         path.push(new AMap.LngLat(locations[i].longitude, locations[i].latitude));
      }

      var polyline = new AMap.Polyline({
         path: path,
         isOutline: true,
         outlineColor: '#ff0000',
         strokeColor: '#3366FF',
         strokeOpacity: 1.0,
         strokeWeight: 3,
         strokeStyle: 'solid'
      });

      polyline.setMap(map);
   </script>
</body>
</html>

Note: You need to replace YOUR_API_KEY with your own Amap API Key.

The above is the detailed content of How to use JS and Amap to implement location trajectory drawing function. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html 循环接口 JS 对象 zoom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JS and Baidu Maps to implement the map administrative district boundary drawing functionNext article：How to use JS and Baidu Maps to implement the map administrative district boundary drawing function

See more

How to use JS and Amap to implement location trajectory drawing function

Related articles