第一次寫文章,寫得很差各位看官見諒~
(pσ_σ)P
首先這是一個vue裏面的項目,高德地圖api是直接CDN進來的,因此使用了global來調用,默認已經初始化了一個地圖,爲了實現一個輸入框搜索功能和將搜索的結果清除掉,直觀表現就是將搜索出來的點清除掉,話很少說直接上代碼javascript
// AMap.Autocomplete是輸入提示插件,詳情參考https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.Autocomplete global.AMap.plugin('AMap.Autocomplete', () => { let autoOptions = { city: this.shopDatadetail.city, input: 'addressInput' // 輸入框ID } let autoComplete = new global.AMap.Autocomplete(autoOptions) // select爲輸入框提示以後的選擇事件,監聽事件用法詳情參考https://lbs.amap.com/api/javascript-api/reference/event/ global.AMap.event.addListener(autoComplete, 'select', e => { this.chooseAddressSelect = e // e爲回調函數返回的下拉框選擇的參數 this.accuratePos = e.poi.name // accuratePos爲輸入框v-model綁定的值 global.AMap.service('AMap.PlaceSearch', () => { let searchOptions = { city: '全國', map: this.map } let searchRes = new global.AMap.PlaceSearch(searchOptions) // 搜索服務,詳情參考https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch searchRes.search(this.chooseAddressSelect.poi.name, () => { // 其實這個地方是我最主要講的,請往下看 searchRes.render.markerList.clear() // 這個爲清除搜索結果的點,不想清除註釋便可 console.log('搜索完成打印', searchRes) // searchRes爲搜索的結果 }) }) }) })
接上,在高德地圖的api中,搜索服務有一個clear方法,可是我使用了沒有用,網上找了一下發現好像不是我一我的遇到了這個問題,可是也有相應的解決方法,即searchRes.render.markerList.clear(),我一開始是這樣寫的vue
let searchRes = new global.AMap.PlaceSearch(searchOptions) searchRes.search(this.chooseAddressSelect.poi.name) searchRes.render.markerList.clear()
可是沒有用,我看其餘人好像都是我這樣使用的,而後去看一下文檔發現search有一個回調函數就嘗試在回調函數裏面使用這個,結果成功了!至於爲何會這樣子我也不知道爲何......有知道的大佬能夠爲我解答一波,踩坑較久,仍是實力不行,順便吐槽一下高德api,告辭!
PS:文中可能沒有什麼精華點,不少都是詳情參考,一來個人確是實力可能尚未到能解答的地步,二是第一次寫真的真的不知道怎麼寫,三是我建議多看文檔才能發現一些解決的辦法。java