Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Hello! Dear friends of the Nuggets, I have been busy with the examination review and work for a long time. I will write the article when I am free today. I feel that writing articles is too easy and reading is not optimistic; Writing is not good, please give advice! The main content of today’s article is the PC version of Vue Autonavi! The following code is the code of my previous project. The previous project could not be opened, so the effect drawing is similar pictures found on the Internet.

The text begins ~

Apply for a key first

Global registration map introduction

Install vuE-AMAP components

Elemefe. Making. IO/vue amap / #…

import VueAMap from "vue-amap" Vue.use(VueAMap); VueAMap. InitAMapApiLoader ({key: '57 f1f8e71bd41a00758d81a8fdfbf826, plugin: [" AMap. PolyEditor "], v: "1.4.10}");Copy the code

Initialize the display map

This is called in mounted

try {            
 this.map = new AMap.Map('container', {
     zoom: 14
     });                
 } catch {
    setTimeout(() => {
     this.map = new AMap.Map('container', {
     zoom: 14
     });
     }, 1500);
 }
Copy the code

Data conversion

The data returned by the background is from GPS and needs to be converted to

 WGS-84 to GCJ-02

GPS to Tencent or Autonavi

gcj_encrypt: function (wgsLat, wgsLon) { if (this.outOfChina(wgsLat, wgsLon)) { return { 'lat': wgsLat, 'lon': wgsLon }; } else { var d = this.delta(wgsLat, wgsLon); return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon }; }},Copy the code

If it’s passed to the background the coordinates to be converted to GPS to the background

 GCJ-02 to WGS-84

Tencent or Autonavi to GPS

gcj_decrypt: function (gcjLat, gcjLon) { if (this.outOfChina(gcjLat, gcjLon)) { return { 'lat': gcjLat, 'lon': gcjLon }; } else { var d = this.delta(gcjLat, gcjLon); return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon }; }},Copy the code

Display of Polygon data (Polygon)

for (let i = 0; i < res.data.length; i++) { res.data[i].coordinate = JSON.parse(res.data[i].coordinate); res.data[i].path = []; for (let j = 0; j < res.data[i].coordinate.length; j++) { let _locat = convers.gcj_encrypt( parseFloat(res.data[i].coordinate[j].lat), parseFloat(res.data[i].coordinate[j].lng) ); res.data[i].path.push([_locat.lon + '', _locat.lat + '']); } } this.fenceArr = res.data; This. FencePolygon = new amap. Polygon({path: res.data[0]. Path, bubble: true, strokeWeight: 3, // // Opacity fillColor: '#000',// polygon filling color fillOpacity: 0.1,// opacity zIndex: 50}); this.map.add(this.fencePolygon);Copy the code

Route Display (Polyline)

Get all coordinate data of marker and access it. There is no need to always call the data of get marker point

if (res.data && res.data.length > 0) { var ridingOption = { policy: 1 }; var riding; AMap.plugin(['AMap.Riding'], function() { riding = new AMap.Riding(ridingOption); }); this.path = []; for (let i = 0; i < res.data.length; i++) { let _locat = convers.gcj_encrypt( parseFloat(res.data[i].lat), parseFloat(res.data[i].lng) ); this.path.push([_locat.lon, _locat.lat]); } if (this.path) {var startMarker = new amap.marker ({position: this.path[0], icon: new amap.marker ({position: this.path[0], icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png', the map: this map}); var endMarker = new AMap.Marker({ position: this.path[this.path.length - 1], icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png', the map: this map}); var polyline = new AMap.Polyline({ path: this.path, borderWeight: 3, strokeColor: '#409eff', strokeOpacity: 1, strokeWeight: 6, // the line pattern also supports the 'strokeStyle' : 'solid', // strokeStyle is the effective strokeDasharray when the strokeStyle is used: [10, 5], lineJoin: 'round', lineCap: 'round', zIndex: 50 }); polyline.setMap(this.map); // Scale the map to the appropriate view level this.map.setFitView([Polyline]); }}Copy the code

All marker points are displayed

let _locat = convers.gcj_encrypt(parseFloat(arr[i].lat), parseFloat(arr[i].lng)); if (arr[i].style == 1) { arr[i].image = '/img/car_marked.png'; } else { arr[i].image = '/img/dcar_marked.png'; } let marker = new AMap.Marker({ position: new AMap.LngLat(_locat.lon, _locat.lat), extData: { id: i }, icon: New amap.icon ({image: arr[I]. Image, size: new amap.size (52, 52), // imageSize: new amap.size (26, 33)}); // Display and describe the marker; Content = '<div><span> Battery: </span>' + arr[I]. Battery + '%</div> <div> < / span > '+ arr [I] qrcode +' < / div > \ < div > < span > the last signal of time: < / span > '+ stampTime (arr [I] last_ride_time) +' < / div > \ < div > < span > equipment serial number: </span>' + arr[i].device + '</div>\ <div id="makdetail" style="cursor: pointer;" > Details: click to view vehicle details </div>'; marker.on('click', this.markerClick); // here is a mark add click event markersarr.push (marker); } // OverlayGroup is used to set the overlay on the map, which is suitable for the scene requiring batch processing of the overlay. this.markers = new AMap.OverlayGroup(markersArr); this.map.add(this.markers); This.map. setFitView([this.fencepolygon, this.markers]);Copy the code

conclusion

This is the summary of my previous project experience; Any wrong place welcome advice; Well, that’s the end of the article; Thank you very much for reading.