前言
本人非專業(yè)前端開發(fā)，其實(shí)是搞后端的，但是正好接了一個(gè)項(xiàng)目需要我負(fù)責(zé)全棧，所以寫了這個(gè)系列的文章，如果以后項(xiàng)目可以開源我會(huì)放出來的
本次我們要實(shí)現(xiàn)的是vue2+高德地圖的網(wǎng)頁開發(fā)
基礎(chǔ)
本文需要大家系統(tǒng)學(xué)過vue以及初步了解高德地圖的情況下理解起來會(huì)十分省力
準(zhǔn)備工作
高德地圖的個(gè)人開發(fā)者注冊
高德api網(wǎng)址
https://lbs.amap.com
1.點(diǎn)擊進(jìn)行注冊
2.注冊完之后進(jìn)入控制臺(tái)
3.創(chuàng)建新應(yīng)用
4.添加
選擇Web端后
高德 2.0 新增
按照步驟全部弄好之后就完成了注冊
最后你會(huì)獲得你注冊的key和安全密鑰，是我們后面使用的關(guān)鍵
創(chuàng)建vue2的項(xiàng)目
創(chuàng)建項(xiàng)目上我想應(yīng)該不用怎么交了吧
vue create XXXXxcd XXXXxnpm run serve
npm 引入高德
官方文檔
https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
1.安裝
打開windows powershell 管理員權(quán)限
2.進(jìn)入項(xiàng)目
3. NPM 方式安裝使用 Loader
npm i @amap/amap-jsapi-loader --save
4.在component目錄下新建MapContainer.vue
5.編寫基礎(chǔ)頁面結(jié)構(gòu)
div的id是你要自定的，叫什么無所謂但是后面地圖初始化的時(shí)候需要用到，你只要注意一下就可以
<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. 在< script >中引入AMapLoader
6.1 import
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
}
</script>
6.2 引入安全密鑰
window._AMapSecurityConfig = {
securityJsCode: '你的安全密鑰'
}
完整代碼
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密鑰'
}
export default {
}
</script>
7.構(gòu)建地圖
7.1data數(shù)據(jù)聲明
data(){
return {
map:null
}
}
7.2methods中構(gòu)建初始化地圖方法
methods:{
initMap(){
AMapLoader.load({
key:"", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //設(shè)置地圖容器id
viewMode:"3D", //是否為3D地圖模式
zoom:5, //初始化地圖級別
center:[105.602725,37.076636], //初始化地圖中心點(diǎn)位置
});
}).catch(e=>{
console.log(e);
})
},
},
7.3mouted生命周期中調(diào)用方法對頁面進(jìn)行渲染
mounted() {
//DOM初始化完成進(jìn)行地圖初始化
this.initMap()
}
}
完整代碼
<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端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
//設(shè)置地圖容器id
viewMode: '3D', //是否為3D地圖模式
zoom: 10, //初始化地圖級別
center: [121.473667, 31.230525] //初始化地圖中心點(diǎn)位置
})
})
.catch(e => {
console.log(e)
})
}
},
mounted() {
//DOM初始化完成進(jìn)行地圖初始化
this.initMap()
}
}
</script>
<style lang="less">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
vue使用
在我們需要的組件中導(dǎo)入使用MapContainer.vue即可文章來源：http://www.zghlxwxcb.cn/news/detail-793206.html
<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {
components: {MapContainer}
}
</script>
結(jié)果展示
文章來源地址http://www.zghlxwxcb.cn/news/detail-793206.html
到了這里，關(guān)于前端系列——vue2+高德地圖web端開發(fā)（使用和引入）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
