Vue2+ Gaode map web-side development (use and introduction)
- foreword
- Preparation
- Create a vue2 project
- npm introduces Gaode
- Vue use
- Result display
foreword
I am a non-professional front-end developer, actually engaged in the back-end, but I just took over a project that requires me to be in charge of the whole stack, so I wrote this series of articles. If the project can be open sourced in the future, I will release it. This time we are going to implement vue2
+ Web development of Gaode map
Base
This article requires everyone to have a systematic study of Vue and a preliminary understanding of the Gaode map, and it will be very labor-saving to understand.
Preparation
Individual developer registration of Gaode map
Gaode api URL
1. Click to register
2. Enter the console after registration
3. Create a new application
4. Add
After selecting the web terminal
AutoNavi 2.0 new
After following all the steps, the registration is completed.
Finally, you will get your registered key and security key, which are the keys we will use later.
Create a vue2 project
I don’t think there is much to hand in when creating a project.
vue create XXXXxcd XXXXxnpm run serve
npm introduces Gaode
official document
https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
1. Install
Open windows powershell administrator privileges
2. Enter the project
3. NPM installation using Loader
npm i @amap/amap-jsapi-loader --save
4. Create a new MapContainer.vue in the component directory
5. Write the basic page structure
The id of the div is what you want to customize. It doesn't matter what it is called, but it will be used when the map is initialized later. You just need to pay attention to it.
<template>
<div id="container"></div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
6. Introduce AMapLoader in <script>
6.1 import
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
}
</script>
6.2 Introducing security keys
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
full code
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
}
</script>
7. Build the map
7.1data data statement
data(){
return {
map:null
}
}
7.2Methods to build initialization map method
methods:{
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key，首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{
//设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
},
7.3Mouted life cycle call method to render the page
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
full code
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
data() {
return {
map: null
}
},
methods: {
initMap() {
AMapLoader.load({
key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [121.473667, 31.230525] //初始化地图中心点位置
})
})
.catch(e => {
console.log(e)
})
}
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
</script>
<style lang="less">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
Vue use
Import and use MapContainer.vue in the components we need
<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {
components: {
MapContainer}
}
</script>
Result display
