Vue.js 加入高德地圖的實現代碼
更新時間：2022年12月12日 15:05:14 作者：清雨未盡時
這篇文章主要介紹了Vue.js 加入高德地圖的實現方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、功能需求
1.根據輸入內容進行模糊查詢，選擇地址后在地圖上插上標記，并更新經緯度坐標顯示
2.在地圖點擊后，根據回傳的左邊更新地址信息和坐標顯示
二、準備
1.申請高德地圖賬號，創(chuàng)建應用
2.在應用管理中 獲得key 和安全密鑰
三、在webstorm中安裝
npm i @amap/amap-jsapi-loader -S
四、防止在使用中AMap無法識別問
在eslintrc.js中加入配置:
globals:{
"AMap": "true"
} 五、正式開發(fā)
1.創(chuàng)建頁面
<template>
<div>
<label>消息管理</label>
<div style="margin-top: 20px">
<div style="height:520px;">
<div id="all" style="height:100%">
<div class="posInput">
<el-input style="width:100%"
id="tipinput"
class="form-control input-style"
type="text"
placeholder="請輸入搜索地址"
prefix-icon="el-icon-search"
v-model="formatAdress"
>
</el-input>
</div>
<div id="allmap"></div>
<div class="posSubmit">
<el-form ref="form" label-width="85px" >
<div class="btn_box" >
<el-form-item label="經度:" >
<el-input style="width:400px" disabled class="form-control input-style" type="text" v-model="longitude"> </el-input>
</el-form-item>
<el-form-item label="緯度:" >
<el-input style="width:400px" disabled class="form-control input-style" type="text" v-model="latitude"> </el-input>
</el-form-item>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
</template>
2.頁面樣式
<style scoped>
#all{
position: relative;
}
#allmap{
width: 100%; height: calc(100% - 50px);
font-family: "微軟雅黑";
}
.posInput{
position: absolute;
z-index: 1;
width: 80%;
margin-top: 20px; margin-left: 10%;
}
.posSubmit{
position: absolute; z-index: 1; bottom: 0;
margin-left: 5%;
width: 90%;
display: flex; justify-content: flex-start; align-items: center;
}
.btn_box{
width: 100%;
height: 100%;
display: flex; ; align-items: center;
}
::v-deep .el-form-item{
margin-bottom: 0 !important;
}
</style>
3.存儲的數據項
data () {
return {
map: null,
marker: null,
startSeacrh: [],
stratInfo: {},
dprops: {
zoom: 15
},
formatAdress: '',
longitude: '', // 經度
latitude: '', // 緯度
}
}
4.創(chuàng)建地圖方法
mounted () {
this.initMap()
},
methods: {
initMap () {
const that = this
init('allmap', that.dprops).then(AMap => {
that.map = AMap
that.map.on('click', that.clickHandler) // 地圖點擊事件 可獲取經緯度等信息
initScaleTools(that.map, true, false)
searchAutocomplete(that.map, 'tipinput', function (event) {
that.handleStartSelect(event)
})
}).catch(err => {
this.$message.error(err)
})
},
clickHandler (event) {
console.log(event, '起點經緯度 [lng,lat]')
if (event.lnglat === '') {
this.$message({
type: 'warning',
message: '該地點無經緯度數據，請輸入具體一點的地點!',
duration: 5 * 1000
})
return
}
if (this.marker) {
this.map.remove(this.marker)
this.marker = null
}
this.startSeacrh = []
this.startSeacrh = [event.lnglat.lng, event.lnglat.lat]
this.marker = new AMap.Marker({
position: this.startSeacrh
})
this.map.add(this.marker)
this.map.setCenter(this.startSeacrh)
this.longitude = event.lnglat.lng
this.latitude = event.lnglat.lat
let that = this
getAddressByLngLat(this.startSeacrh, function (status, result) {
if (status === 'complete') {
that.formatAdress = result.regeocode.formattedAddress
let adrComponent = result.regeocode.addressComponent
that.stratInfo = {
district: adrComponent.province,
address: adrComponent.district,
name: adrComponent.township + adrComponent.street + adrComponent.streetNumber,
fullAdr: result.regeocode.formattedAddress
}
}
})
},
handleStartSelect (event) {
console.log(event, '起點經緯度 [lng,lat]')
if (event.poi.location === '') {
this.$message({
type: 'warning',
message: '該地點無經緯度數據，請輸入具體一點的地點!',
duration: 5 * 1000
})
return
}
if (this.marker) {
this.map.remove(this.marker)
this.marker = null
}
this.startSeacrh = []
this.startSeacrh = [event.poi.location.lng, event.poi.location.lat]
this.formatAdress = event.poi.district + event.poi.address + event.poi.name
this.longitude = event.poi.location.lng
this.latitude = event.poi.location.lat
this.marker = new AMap.Marker({
position: this.startSeacrh
})
this.map.add(this.marker)
this.map.setCenter(this.startSeacrh)
this.stratInfo = {
district: event.poi.district,
address: event.poi.address,
name: event.poi.name,
fullAdr: this.formatAdress
}
}
}
5.封裝好的js文件方法
initMap.js
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '安全密鑰'
}
const initMap = async (config) => {
return new Promise((resolve, reject) => {
AMapLoader.load({
'key': config.key,
'version': '1.4.15',
'plugins': [
'AMap.PolygonEditor' // 插件
],
'AMapUI': {
'version': '1.1',
'plugins': []
},
'Loca': {
'version': '1.3.2'
}
}).then((AMap) => {
resolve(AMap)
}).catch(err => {
reject(err)
})
})
}
export default initMap
map.js
import initMap from './initMap.js'
export const init = (container, props) => {
const config = {
key: 'key'
}
return new Promise((resolve, reject) => {
initMap(config).then(AMap => {
resolve(new AMap.Map(container, { ...props }))
}).catch(err => {
reject(err)
})
})
}
/**
* @param {*} map 地圖實例
* @param {Boolean} noScale 不需要比例尺 true表示不需要
* @param {Boolean} noToolBar 不需要工具欄 true表示不需要
*/
export const initScaleTools = (map, noScale, noToolBar) => {
if (!noScale) {
map.plugin(['AMap.Scale'], function () {
var scale = new AMap.Scale()
map.addControl(scale)
})
}
if (!noToolBar) {
map.plugin(['AMap.ToolBar'], function () {
var tool = new AMap.ToolBar()
map.addControl(tool)
})
}
}
//模糊查詢
export const searchAutocomplete = (map, keyword, commpletHandle) => {
map.clearMap()
AMap.plugin(['AMap.PlaceSearch', 'AMap.Autocomplete'], function () {
let autoOptions1 = { input: keyword, city: '全國' }
let startAutoComplete = new AMap.Autocomplete(autoOptions1)
AMap.PlaceSearch({
map: map
})
AMap.event.addListener(startAutoComplete, 'select', commpletHandle)
})
}
/**
*
* @param {String} LngLat 經緯度
* @param {Function} callback 回調函數
* @param {Object} otherProps 其他參數
*/
export const getAddressByLngLat = (LngLat, callback, otherProps) => {
AMap.plugin('AMap.Geocoder', function () {
let geocoder = new AMap.Geocoder({
...otherProps
})
geocoder.getAddress(LngLat, function (status, result) {
callback(status, result)
})
})
}
const mapJS = {
init,
initScaleTools,
searchAutocomplete,
getAddressByLngLat
}
export default mapJS
在文件中導入 map.js方法
import {
init,
initScaleTools,
searchAutocomplete,
getAddressByLngLat
} from '../../utils/map'
六、步驟總結
1.在mounted（）中調用 initMap ()初始化地圖
2.初始化成功后、添加事件監(jiān)聽：地圖點擊、模糊查詢。添加放大縮小工具欄
init('allmap', that.dprops).then(AMap => {
that.map = AMap
that.map.on('click', that.clickHandler) // 地圖點擊事件 可獲取經緯度等信息
initScaleTools(that.map, true, false)
searchAutocomplete(that.map, 'tipinput', function (event) {
that.handleStartSelect(event)
})
})
七：效果
到此這篇關于Vue.js 加入高德地圖的實現方法的文章就介紹到這了,更多相關Vue.js 加入高德地圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue如何解決sass-loader的版本過高導致的編譯錯誤
這篇文章主要介紹了vue如何解決sass-loader的版本過高導致的編譯錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
對于Vue中實現一般的下載功能很簡單,下面這篇文章主要給大家介紹了關于前端vue中文件下載的三種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了vue:el-input輸入時限制輸入的類型操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
VUE中computed 、created 、mounted的先后順序說明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue中import from@符號指的是意思,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決
這篇文章主要介紹了安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了關于vue3簡單封裝input組件和統(tǒng)一表單數據的相關資料,不管你學習哪一門編程語言,相信大家都會略化這一部分,需要的朋友可以參考下2022-05-05
vue3中v-for報錯'item'is?of?type'unknown'的
在寫vue3+ts的項目,得到一個數組,需要循環(huán)展示,使用v-for循環(huán),寫完之后發(fā)現有個報錯,接下來通過本文給大家介紹vue3中v-for報錯?‘item‘?is?of?type?‘unknown‘的解決方法,感興趣的朋友一起看看吧2023-11-11