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