1. Import the map in index.html under public

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script src="The key https://webapi.amap.com/maps?v=1.4.15&key= application"></script>
Copy the code

2. Set the width and height of the imported component to 100%

<template>
  <div>
    <div id="container" style="width: 100%; height: 550px"></div>
  </div>
</template>
Copy the code

3. Fixed data in array form (1)

<script>
export default {
  data() {
    return {
    // The latitude and longitude of all points to be marked
      lnglats: [[108.909074.34.254225],
        [108.910766.34.254348],
        [108.910495.34.253531],
        [108.909502.34.253571]],}},mounted() {
    this.carGPSIP()
  },
  methods: {
    carGPSIP() {
      var map = new AMap.Map("container", {resizeEnable: true});// Initialize the map
      // Information window instance
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      // Iterate to generate multiple tag points
      for (var i = 0, marker; i < this.lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: this.lnglats[i],// The latitude and longitude of the different markers
          map: map
        });
        marker.content = 'I am number one' + (i + 1) + 'a Marker';
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});// The default initialization does not appear the information form, open initialization will appear the information form
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
      }
    },
}
</script>
Copy the code

Use Ajax to request backend real interface (2)

<template>
      <div id="container" style="width: 100%; height: 550px"></div><! -- set width and height --> </template><script>
export default {
  data() {
    return {
    // The latitude and longitude of all points to be marked
      Coordinate: []// Coordinate:[
      / / {
      / / LNG: "54.323243",
      / / lat: "43.654322"
      / /}
      //] // Format of the data returned by the backend}},mounted() {
    this.carGPSIP()
  },
  methods: {
    carGPSIP() {
      var map = new AMap.Map("container", {resizeEnable: true});// Initialize the map
      // Information window instance
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      // The backend returns a map format, so code needs to be determined
    $ajax.positionType({}, ({ code, data }) = > {
        if (code == 200) {
          console.log(data);
          this. Coordinate = data.deviceList; // Get the data
          let  Coordinate = data.deviceList;  / / define Coordinate
          for (var i = 0; i < this. Coordinate.length; i++) {
            var marker = new AMap.Marker({
              position: new AMap.LngLat( Coordinate[i].lng,  Coordinate[i].lat), // The latitude and longitude of the different markers
              map: map,
            });
             marker.content = 'I am number one' + (i + 1) + 'a Marker';
            marker.on("click", markerClick);
            marker.emit("click", { target: marker }); // The default initialization does not appear the information form, open initialization will appear the information form
          }
          function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); }});function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); }}},</script>


<style>

</style>
Copy the code

5. For other requirements, please refer to the official documents

Lbs.amap.com/api/javascr…

To sum up, this is the whole process of using Amap. For specific requirements, please refer to the official API of Autonavi