Use Amap in Vue projects. There are several useful ones on the web, for example

  • Amap-vue, well documented, but not open source
  • Vue-amap, documentation makes people cry

Lazy people and needs not complex, can directly use the above. Above two open source has not been quite active, with not at ease. Some advanced map functions, especially troublesome to use. So, instead of a third party, wrap your own map components.

demand

  • Components are imported on demand. I like my code to be clean, as long as it has the functionality that the project needs
  • Simple encapsulation, easy to use the required functions according to the official document
  • Based on Vue2, AMap 2.0, AMapUI 1.1

knowledge

  • Vue slotslotFor easy use on mapsAMapUIfunction
  • Vue noticeemit,on. In order to pass the parameter, the main is to get the map AMap object
  • Vue component encapsulation, components have dependencies between the encapsulation, you can refer to
  • Vue loads components asynchronously
  • The trajectory data used in the demonstration is implemented via local mock, referring to the vUE local mock server requesting mock data

implementation

components — map — index.vue

Map single file component, the main code is as follows, specific reference code

<template>
  <div class="amap-view">
    <div id="amapcontainer" :style="{ height: mapHeight }" />
    <slot />
  </div>
</template>

Copy the code

components — map — index.js

Map component business code, can configure the map open properties props and listen to events.

Here, for example, amapKey, styleId, Zoom, Center, height, plugins are enabled. Uis (AMapUI that maps load by default).

Listen for amap-ready when the map is loaded. Pass the map object to an Amapui-related wrapper for easy invocation.

With amap 2.0 version, the project loaded the main reference to the official document AMap JSAPI loading

The main code is as follows, the specific reference code

import AMapLoader from '@amap/amap-jsapi-loader' export default { name: 'AmapView', props: { amapKey: { type: String, default: '6411e510973dc722ce416a298588ae4e' }, styleId: { type: String, default: '728e2ca5c2c75aa8b26190a9e23c4687' }, zoom: { type: Number, default: 12 }, center: { type: / Array, a String, the default () {return [113.220218, 23.404165]}}, height: {type: Number | String, the default: 520 }, plugins: { type: Array, default: () => [] }, uis: { type: Array, default: () => ['overlay/SimpleMarker'] } }, computed: { mapHeight() { return isNaN(this.height) ? this.height : `${this.height}px` } }, data() { return { map: '' } }, beforeDestroy() { this.map && this.map.destroy() this.map = null }, created() { this.initMap() }, methods: {initMap() {amaploader.load ({key: this.amapkey, version: '2.0', AMapUI: {version: '1.1', plugins: This.uis}}). Then ((AMap) => {this.map = new amap. map ('amapcontainer', {zoom: this.zoom, // level center: This.center, // mapStyle: `amap://styles/${this.styleId}` }) this.$emit('amap-ready', this.map) }).catch(e => { console.log(e) }) } } }Copy the code

components — map –polyLine.vue

Track component, mainly open the track attribute linePath, convenient interface call parameter transmission. For details about attribute configuration, see the document PathSimplifier

The main code is as follows, the specific reference code

<template> <div /> </template> <script> export default { name: 'AmapPolyline', props: { linePath: { type: Array, default() { return [] }, required: true } }, created() { this.$parent.$on('amap-ready', this.initComponents) }, methods: { initComponents(amap) { AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => { if (! PathSimplifier. SupportCanvas) {alert (' the current environment doesn't support Canvas! ') return} const pathSimplifierIns = new PathSimplifier({zIndex: 100, map: amap, // map instance getPath: function(pathData, pathIndex) { return pathData.path }, getHoverTitle: Function (pathData, pathIndex, pointIndex) {if (pointIndex >= 0) {return pathdata. name + ', '+ pointIndex + '/' + pathdata.path. length} return pathdata. name +', number of points' + pathdata.path. length}, renderOptions: {renderAllPointsIfNumberBelow: 100 / / draw the route node, if you don't need can be set to 1}}) / / set data pathSimplifierIns. SetData ([{name: '0' route, path: Enclosing linePath}]) / / on the first line (i.e., index 0) to create a rover, const navg1 = pathSimplifierIns. CreatePathNavigator (0, {loop: True, // Loop playback speed: 100 // cruising speed, km/h}) navg1.start()})}} </script>Copy the code

Call way

Refer to the code in polylineTest for details

polylineTest — index.vue

How the component is invoked

<amap-view>
  <amap-polyline :line-path="data" />
</amap-view>
Copy the code

polylineTest — index.js

Here, the trajectory data is simulated and the encapsulated map component AmapView and trajectory component AmapPolyline are asynchronously loaded

import { polylineData } from '@/api/polyline' export default { name: 'polylineTestView', components: { AmapView: () => import ('@/components/map/index.vue'), AmapPolyline: () => import ('@/components/map/polyLine.vue') }, data() { return { data: [] } }, created() { this.testData() }, methods: { async testData() { const { code, result } = await polylineData() if (code ! == 0) return this.data = result.data } } }Copy the code

Pure map component effect

With track component effect

Pay attention to

CreatePathNavigator’s Speed attribute, when zooming in on the map (the zoom value is very large), do not set the speed attribute too high, otherwise you will not see the effect of the track movement, motionless, confusing. The code is fine, but it doesn’t work, and it really hurts. I guess I’m moving too fast for my eyes.

Code overview

The files involved are as follows (specific reference code) :

| - public | - data | -- polylines. Json / / trajectory data demonstration | - SRC | | - API -- polylines. Js / / simulated real data interface request | - components | - map Single file | -- index. Vue / / map component, for interface call | -- index. Js / / map initialization, configuration related | -- polylines. Vue / / simple encapsulation of track components, Demonstration | - views | | - polylineTest / / demo is - index. The vue | -- index. SCSS | -- index. JsCopy the code

code

Just look for the code in the code Overview directory.

conclusion

The above is just a simple encapsulation. The trace component is just a simple path sample code for the trace display above the JS API UI component example. When you really use it, you can look at demand expansion. Like every point on the track, you can pop up and show the location information, and that’s a very common thing to do when you’re showing people’s tracks. This relates to the use of the Vue real-time rendering component, which is not covered here.