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>