How to use JS and Amap to implement location trajectory drawing function-JS Tutorial-php.cn

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

PHPz

Release： 2023-11-21 09:05:27

Original

1280 people have browsed it

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

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>

Copy after login

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>

Copy after login

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] // 地图中心点经纬度
});

Copy after login

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},
   // ...
];

Copy after login

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

Copy after login

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>

Copy after login

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!