Développement côté web de la carte Vue2+ Gaode (utilisation et introduction)
- avant-propos
- Préparation
- Créer un projet vue2
- npm présente Gaode
- Utilisation de la vue
- Affichage des résultats
avant-propos
Je suis un développeur front-end non professionnel, en fait engagé dans le back-end, mais je viens de reprendre un projet qui me demande d'être en charge de toute la pile, j'ai donc écrit cette série d'articles. être open source à l'avenir, je le publierai. Cette fois, nous allons implémenter vue2
+ développement Web de la carte Gaode
Base
Cet article nécessite que chacun ait une étude systématique de Vue et une compréhension préliminaire de la carte de Gaode, et sa compréhension sera très économique.
Préparation
Enregistrement individuel du développeur de la carte Gaode
URL de l'API Gaode
1. Cliquez pour vous inscrire
2. Entrez dans la console après l'enregistrement
3. Créer une nouvelle application
4. Ajouter
Après avoir sélectionné le terminal Web
AutoNavi 2.0 nouveau
Après avoir suivi toutes les étapes, l'enregistrement est terminé.Enfin
, vous obtiendrez votre clé enregistrée et votre clé de sécurité, qui sont les clés que nous utiliserons plus tard.
Créer un projet vue2
Je ne pense pas qu'il y ait beaucoup à remettre lors de la création d'un projet.
vue create XXXXxcd XXXXxnpm run serve
npm présente Gaode
document officiel
https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
1. Installer
Ouvrez les privilèges d'administrateur de Windows PowerShell
2. Entrez le projet
3. Installation de NPM à l'aide de Loader
npm i @amap/amap-jsapi-loader --save
4. Créez un nouveau MapContainer.vue dans le répertoire des composants
5. Écrivez la structure de base de la page
L'identifiant de la div est ce que vous souhaitez personnaliser. Peu importe son nom, mais il sera utilisé lors de l'initialisation de la carte ultérieurement. Il vous suffit d'y prêter attention.
<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. Introduisez AMapLoader dans <script>
6.1 importation
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
}
</script>
6.2 Présentation des clés de sécurité
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
code complet
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
}
</script>
7. Construisez la carte
7.1 déclaration de données
data(){
return {
map:null
}
}
7.2Méthodes pour construire la méthode de carte d'initialisation
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.3Méthode d'appel du cycle de vie pour rendre la page
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
code complet
<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>
Utilisation de la vue
Importer et utiliser MapContainer.vue dans les composants dont nous avons besoin
<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {
components: {
MapContainer}
}
</script>
Affichage des résultats
