How to use JS and Amap to implement location navigation function

How to use JS and Amap to implement location navigation function

With the popularity of smartphones, map navigation has become one of the indispensable functions in daily life . In web pages or mobile applications, through JS and Amap API, we can easily implement location navigation functions. The following will introduce in detail how to use JS and Amap API to implement the location navigation function, and provide code examples.

1. Preparation
Before starting, we need to register an Amap developer account and create an application to obtain the API Key. API Key is the only credential for accessing the Amap map service and can be passed to the API as a parameter when using the map API.

2. Introducing the Amap API
In the HTML file, we first need to introduce the JS file of the Amap API. You can download the latest version of the API file from the Amap developer website, or you can directly use the CDN link provided by Amap.

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script>

Among them, your_api_key needs to be replaced with your own API Key.

3. Create a map container
In the HTML file, we need to create a container for displaying the map. Can be a div element or other appropriate element.

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

4. Initialize the map object
In the JS file, we need to initialize the map object and set the center point and zoom level of the map.

var map = new AMap.Map('mapContainer', {
  center: [116.397428, 39.90923], // 默认中心点坐标（北京）
  zoom: 13 // 默认缩放级别
});

[116.397428, 39.90923] is the latitude and longitude coordinates of the center point of the map, which can be adjusted according to needs.

5. Add marker points
When conducting location navigation, we usually have two marker points, the starting point and the end point. We can use the Marker object of Amap to add marker points.

var startMarker = new AMap.Marker({
  position: [116.397428, 39.90923], // 起点坐标
  map: map, // 传入地图对象
  title: '起点' // 鼠标悬停时显示的标题
});

var endMarker = new AMap.Marker({
  position: [116.397428, 39.948691], // 终点坐标
  map: map, // 传入地图对象
  title: '终点' // 鼠标悬停时显示的标题
});

[116.397428, 39.90923] is the starting point coordinates, [116.397428, 39.948691] is the end point coordinates, which can be adjusted according to actual needs.

6. Drawing a navigation route
Using the Driving object of Amap, we can draw a navigation route based on the starting and ending point coordinates.

var driving = new AMap.Driving({
  map: map, // 传入地图对象
  panel: 'routePanel' // 显示导航结果的容器ID
});

driving.search(new AMap.LngLat(116.397428, 39.90923), new AMap.LngLat(116.397428, 39.948691), function (status, result) {
  if (status === 'complete') {
    // 导航路线绘制成功
  } else {
    // 导航路线绘制失败
  }
});

'routePanel' is the ID of the container element that displays the navigation results, which can be set according to your needs.

7. Complete code example

  
  
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script>


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


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

    var startMarker = new AMap.Marker({
      position: [116.397428, 39.90923],
      map: map,
      title: '起点'
    });

    var endMarker = new AMap.Marker({
      position: [116.397428, 39.948691],
      map: map,
      title: '终点'
    });

    var driving = new AMap.Driving({
      map: map,
      panel: 'routePanel'
    });

    driving.search(new AMap.LngLat(116.397428, 39.90923), new AMap.LngLat(116.397428, 39.948691), function (status, result) {
      if (status === 'complete') {
        // 导航路线绘制成功
      } else {
        // 导航路线绘制失败
      }
    });
  </script>

The above is the method of using JS and Amap API to implement the location navigation function. Through corresponding API calls, we can display maps, add markers and draw navigation routes on web pages or mobile applications. According to actual needs, we can modify and expand the code accordingly to meet specific location navigation functional requirements.

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