vue uses the Gaode map plug-in vue-amap article

Register an account

===========

First, you must become a Gaode map developer, which means you have an account. Of course, it is best to have a company account. If you don’t have one, just register one yourself for the time being.

After registering, click on the console, create a new application in the upper right corner, select the environment you need, for Vue it is probably the web side, and then you can see the keys you need for development.

Amap plug-in installation

First of all, the example project here uses vue-cli3 scaffolding. If you are not familiar with it, you can first take a look at the vue-cli3 creation project.

npm install vue-amap

npm install vue-amap --save

Page introduction and component configuration

My project here uses maps in many places, so I separated the map to make a separate component, and it is a global component for easy reference on the page.

Create global component AMap

Create the global map component file AMap.vue and the global component configuration file globalComponents.js

The project directory structure is as shown in the figure

The main.js page introduces vue-amap and globalComponents.js

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

import globalComponents from ‘./assets/commonJs/globalComponents’ //Global component configuration file

import VueAMap from ‘vue-amap’; // Gaode Map

import {AMapKey} from ‘./assets/commonJs/constDatas’//AMapKey is the Amap development key. I have put it in a special file management here. You don’t have to do this.

Vue.use(VueAMap) //Plug-in usage statement

Vue.use(globalComponents) //Plug-in usage statement

//The following is vue-amap initialization, please replace AMapKey with your own key

VueAMap.initAMapApiLoader({
key:AMapKey,

plugin: \['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', \],

v: '1.4.4'
})

Vue.config.productionTip = false

new View({

router,

store,

render: h => h(App)

}).$mount(‘#app’)

Configure AMap as a global component

In the globalComponents.js file

import AMap from ‘…/…/globalComponents/AMap/AMap’; //AMAP component

export default {

install(View) {
  Vue.component('AMap', AMap)
}

};

AMap page implementation

**I would like to emphasize here that if you want to use vue-amap well, you must first introduce the AMap map tag on the page to create a map instance, and then you can use the corresponding API. Some friends may not need to display the map, but just want to use a certain API. , such as obtaining the address based on longitude and latitude, so after configuring it in main.js, I can’t wait to go to the corresponding page to write this section.

AMap.plugin(‘AMap.Geocoder’, ()=> {

let geocoder = new AMap.Geocoder({

// city specifies the city for encoding query, supports passing in city name, adcode and citycode

city:citycode

})

geocoder.getAddress([lng,lat], (status, result)=> {

…

})

Then you may see something like the following

You may also import it directly on the page, such as import AMap from ‘vue-amap’, and then you are likely to see an error like the following.

Not much else to talk about. In short, you must first create an instance with tags in the html part before other APIs can be used. Without further ado, let’s start with the code and look at the html part first.

<div class="amapBox" :style="{height}">

    <el-amap class="amap-box" :vid="'amap-vue'" :plugin="plugin" :center="mapCenter" :events="events" ref="map">

        <el-amap-marker

                vid="component-marker"

                :position="markPosition"

                :icon="require('../../assets/images/mapMark.png')"

                :draggable="true"

                :raiseOnDrag="true"

                :events="markEvents"

        ></el-amap-marker>

    </el-amap>

</div>

el-amap is the label of the instance created by vue-amap. Needless to say, class, just copy the vid, which is the map component id. In addition, plugin is the map plug-in configuration, center is the center position of the map, and events are events.

el-amap-marker is a map mark label, where position is the label position and icon is the mark icon. You can use network images or local images. Please use require to introduce local images. Draggable indicates whether the marker can be dragged. events is the event.

In the following css part, the Gaode map component itself does not have width and height by default. It needs to inherit the width and height of the parent, so it is necessary to set the width and height for the el-map tag parent.

> <style scoped lang="less">
> 
>     .amapBox{
> 
>         width:100%;
> 
>     }
> 
> </style>

The map component has been completed and can be called happily.

The parent component calls the AMap component

AMap has been configured as a global component, so this page can be used directly without introducing and registering components.

<div class="mapBox columnStart">

    <div class="mapSearchBox rowStart">

        

        <input placeholder="搜索地点" class="mapInput" v-model="searchName" @input="searchAddress"/>

    </div>

    <AMap @getAddressInfo="getAddressInfo" ref="amapComponent"/>

    <ul class="mapAddressBox">

        <li class="rowBtween mapAddressLi" v-for="(address,index) in addresses" :key="index" @click="chooseAddress(index)">

            <div class="addressBox columnStart">

                <div class="addressName">{
    
    {address.name}}</div>

                <span class="detailAddress gray999">{
    
    {address.formattedAddress}}</span>

            </div>

            <van-icon name="success" color="#4491FA" size="18" v-if="activeIndex===index"/>

        </li>

    </ul>

</div>