vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))
更新時(shí)間：2020年03月07日 12:33:56 作者：MrsTing
這篇文章主要介紹了vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼，也是小編踩了無數(shù)坑總結(jié)出來的經(jīng)驗(yàn),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.首先在index.html引入高德地圖的秘鑰。如圖：
注意：如果使用關(guān)鍵字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch，否則功能無法使用，并會(huì)報(bào)錯(cuò)
2. 定位功能，代碼如下：
const map = new AMap.Map(this.$refs.container, {
resizeEnable: true
}) // 創(chuàng)建Map實(shí)例
const options = {
'showButton': true, // 是否顯示定位按鈕
'buttonPosition': 'LB', // 定位按鈕的位置
'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對(duì)應(yīng)角落的距離
'showMarker': true, // 是否顯示定位點(diǎn)
'showCircle': true, // 是否顯示定位精度圈
'circleOptions': {// 定位精度圈的樣式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
},
zoomToAccuracy: true // 定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)
}
AMap.plugin(['AMap.Geolocation'], function() {
const geolocation = new AMap.Geolocation(options)
map.addControl(geolocation)
geolocation.getCurrentPosition()
})
//下面是點(diǎn)擊地圖時(shí)加入mark。注意：要在綁定事件前記錄this，否則在綁定的回調(diào)方法中使用this將是該事件的this
const _this = this
AMap.event.addListener(map, 'click', function(e) {
map.clearMap() // 清除地圖上所有添加的覆蓋物
new AMap.Marker({
position: e.lnglat,
map: map
})
_this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
})
3.關(guān)鍵字搜索功能
html部分代碼（注意ref,id,class的名字要和官網(wǎng)保持一致，否則可能出不來想要的效果）：
<template>
<div class="map-chart">
<div id="container" ref="container" />
<div id="myPageTop">
<table>
<tr>
<td>
<label>請(qǐng)輸入關(guān)鍵字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput">
</td>
</tr>
</table>
</div>
</div>
</template>
script代碼：
export default {
name: 'Map',
props: [],
data() {
return {
placeSearch: null
}
},
mounted() {
this.mapInit()
},
methods: {
mapInit() {
const map = new AMap.Map(this.$refs.container, {
resizeEnable: true
}) // 創(chuàng)建Map實(shí)例
const options = {
'showButton': true, // 是否顯示定位按鈕
'buttonPosition': 'LB', // 定位按鈕的位置
'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對(duì)應(yīng)角落的距離
'showMarker': true, // 是否顯示定位點(diǎn)
'showCircle': true, // 是否顯示定位精度圈
'circleOptions': {// 定位精度圈的樣式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
},
zoomToAccuracy: true // 定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)
}
//注意：要在綁定事件前記錄this，否則在綁定的回調(diào)方法中使用this將是該事件的this
const _this = this
// 輸入提示
const autoOptions = {
input: 'tipinput'
}
const auto = new AMap.Autocomplete(autoOptions)
this.placeSearch = new AMap.PlaceSearch({
map: map
}) // 構(gòu)造地點(diǎn)查詢類
AMap.event.addListener(auto, 'select', this.select)// 注冊(cè)監(jiān)聽，當(dāng)選中某條記錄時(shí)會(huì)觸發(fā)
//點(diǎn)擊搜索出的mark點(diǎn)事件
AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
_this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
})
},
select(e) {
this.placeSearch.setCity(e.poi.adcode)
this.placeSearch.search(e.poi.name) // 關(guān)鍵字查詢查詢
},
handleMap(o, a) {
this.$emit('bMapDate', o, a)
}
}
}
</script>
整體完成代碼：
<template>
<div class="map-chart">
<div id="container" ref="container" />
<div id="myPageTop">
<table>
<tr>
<td>
<label>請(qǐng)輸入關(guān)鍵字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput">
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'Map',
props: [],
data() {
return {
placeSearch: null
}
},
mounted() {
this.mapInit()
},
methods: {
mapInit() {
const map = new AMap.Map(this.$refs.container, {
resizeEnable: true
}) // 創(chuàng)建Map實(shí)例
const options = {
'showButton': true, // 是否顯示定位按鈕
'buttonPosition': 'LB', // 定位按鈕的位置
'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對(duì)應(yīng)角落的距離
'showMarker': true, // 是否顯示定位點(diǎn)
'showCircle': true, // 是否顯示定位精度圈
'circleOptions': {// 定位精度圈的樣式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
},
zoomToAccuracy: true // 定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)
}
AMap.plugin(['AMap.Geolocation'], function() {
const geolocation = new AMap.Geolocation(options)
map.addControl(geolocation)
geolocation.getCurrentPosition()
})
const _this = this
AMap.event.addListener(map, 'click', function(e) {
map.clearMap() // 清除地圖上所有添加的覆蓋物
new AMap.Marker({
position: e.lnglat,
map: map
})
_this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
})
// 輸入提示
const autoOptions = {
input: 'tipinput'
}
const auto = new AMap.Autocomplete(autoOptions)
this.placeSearch = new AMap.PlaceSearch({
map: map
}) // 構(gòu)造地點(diǎn)查詢類
AMap.event.addListener(auto, 'select', this.select)// 注冊(cè)監(jiān)聽，當(dāng)選中某條記錄時(shí)會(huì)觸發(fā)
AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
_this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
})
},
select(e) {
this.placeSearch.setCity(e.poi.adcode)
this.placeSearch.search(e.poi.name) // 關(guān)鍵字查詢查詢
},
handleMap(o, a) {
this.$emit('bMapDate', o, a)
}
}
}
</script>
<style scoped>
.map-chart{
position: relative;
margin-bottom:15px;
width: 100%;
height: 400px;
border: 1px #dddddd solid;
}
/deep/ .amap-logo,/deep/ .amap-copyright {
display: none!important;
}
#container {
margin-bottom:15px;
width: 100%;
height: 400px;
border: 1px #dddddd solid;
z-index: 99999999;
}
.button-group {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
padding: 10px;
}
.button-group .button {
height: 28px;
line-height: 28px;
background-color: #0D9BF2;
color: #FFF;
border: 0;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}
.button-group .inputtext {
height: 26px;
line-height: 26px;
border: 1px;
outline: none;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
margin-bottom: 4px;
cursor: pointer;
}
#tip {
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
position: absolute;
font-size: 12px;
right: 10px;
top: 20px;
border-radius: 3px;
border: 1px solid #ccc;
line-height: 30px;
}
.amap-info-content {
font-size: 12px;
}
#myPageTop {
position: absolute;
top: 5px;
right: 10px;
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
margin: 10px auto;
padding:6px;
font-family: "Microsoft Yahei", "微軟雅黑", "Pinghei";
font-size: 14px;
z-index: 99999999;
}
#myPageTop label {
margin: 0 20px 0 0;
color: #666666;
font-weight: normal;
}
#myPageTop input {
width: 170px;
}
#myPageTop .column2{
padding-left: 25px;
}
</style>
由于我在項(xiàng)目中使用了dialog,搜索出來的結(jié)果會(huì)在蒙版后面顯示，去掉scope和加/deep/、>>>都沒用，最后在index.html加樣式。代碼如下：
<style type="text/css">
.amap-sug-result {
z-index: 2999!important;
}
</style>
效果：
以上就是踩了無數(shù)坑總結(jié)出來的經(jīng)驗(yàn)。。。
到此這篇關(guān)于vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))的文章就介紹到這了,更多相關(guān)vue 高德地圖定位搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟
這篇文章主要介紹了vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3編寫氣泡對(duì)話框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
ElementUI中el-dropdown-item點(diǎn)擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點(diǎn)擊事件無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
ElementUI中el-form組件的rules參數(shù)舉例詳解
Form組件提供了表單驗(yàn)證的功能,只需要通過rules屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的prop屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于ElementUI中el-form組件的rules參數(shù)的相關(guān)資料,需要的朋友可以參考下2023-10-10
axios?發(fā)?post?請(qǐng)求，后端接收不到參數(shù)的完美解決方案
這篇文章主要介紹了axios?發(fā)?post?請(qǐng)求，后端接收不到參數(shù)的解決方案,場景很簡單，就是一個(gè)正常 axios post 請(qǐng)求，本文給大家分享問題原因分析及解決方案需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue頁面渲染中key的應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue如何監(jiān)聽元素橫向滾動(dòng)到最右側(cè)
這篇文章主要介紹了vue如何監(jiān)聽元素橫向滾動(dòng)到最右側(cè)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-router判斷頁面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決
這篇文章主要介紹了VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11