項(xiàng)目有用到Google autocomplete for addresses and search, 這個(gè)是谷歌官網(wǎng)文檔
憋肖，因?yàn)轫?xiàng)目用的是vue赦政，有dalao已經(jīng)寫好的有組件了叫做：vue-google-autocomplete璧瞬，可在倉(cāng)庫(kù)地址 查看具體用法酵紫。
效果圖：
google autocomplete
1. 獲取key后引入腳本文件
先在index.html的head標(biāo)簽中引入api js文件,YOUR_API_KEY_HERE可以在google map api官網(wǎng)獲取沟沙。
<!DOCTYPE html>
<html>
<head>
…
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
</head>
<body>
…
</body>
</html>
注意： 這個(gè)js最好寫在其他js的引入文件前嗡呼，我就遇到
map和recaptcha一起引入施戴，然后后引入的map末融，結(jié)果報(bào)錯(cuò)钧惧，后來換個(gè)順序就可以了。
2. 安裝
安裝: npm / yarn 自己選一個(gè)
$ npm install vue-google-autocomplete --save
or
$ yarn add vue-google-autocomplete
3. 使用
在要使用的組件中先導(dǎo)入
import VueGoogleAutocomplete from 'vue-google-autocomplete'
不要忘記加入 components 中.
在template中使用
<vue-google-autocomplete
id="mapNew"
classname="txt"
ref="newAddressElem"
:class="{error: data.newAddress==''}"
:placeholder="placeholder text"
country="hk"
@placechanged="getAddressData"
@inputChange="updateNewAddress"
>
</vue-google-autocomplete>
country是指定城市勾习，可以有個(gè)字符串也可以有個(gè)數(shù)組浓瞪，具體可看github。因?yàn)闆]有v-model巧婶，所以可以通過inputChange事件實(shí)現(xiàn)獲取用戶輸入的值乾颁。
data() {
return {
newAddress: ''
}
},
methods: {
getAddressData(addressData, placeResultData, id) {
console.log(addressData, placeResultData, id)
},
updateNewAddress(val) {
this.newAddress = val.newVal
}
}
inputChange事件是文本框內(nèi)容改變時(shí)觸發(fā)，包括用戶輸入的內(nèi)容艺栈。placechanged事件是下拉選項(xiàng)選擇后觸發(fā)英岭，用戶輸入不會(huì)觸發(fā)。
還有一些其它花里胡哨的屬性和事件湿右，官網(wǎng)也沒有詳寫??诅妹。
-- End --
