[TOC] #### Vue 利用高德定位實現餓了么定位當前位置  1. 注冊高德開發者 https://lbs.amap.com 2. 創建一個應用，拿到key  3. 獲取JS代碼  4. public / index.html 引入代碼 >[danger] 注意，一定要在頭部引入  5. App.vue 中加入以下代碼 ~~~ <template> <div id="app"> <router-view /> </div> </template> <script> import { createNamespacedHelpers } from 'vuex' const { mapActions } = createNamespacedHelpers('city'); export default { name: 'app', created() { this.getLocation() }, methods: { ...mapActions([ 'setlocation', 'setcity' ]), getLocation() { const self = this; AMap.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation({ // 是否使用高精度定位，默認：true enableHighAccuracy: true, // 設置定位超時時間，默認：無窮大 timeout: 10000 }) geolocation.getCurrentPosition() AMap.event.addListener(geolocation, 'complete', onComplete) AMap.event.addListener(geolocation, 'error', onError) function onComplete (data) { // data是具體的定位信息 // 存入vuex中 self.setlocation(data) self.setcity(data.formattedAddress) } function onError (data) { // 定位出錯 self.getLngLatLocation() } }) }, getLngLatLocation() { const self = this; AMap.plugin('AMap.CitySearch', function () { var citySearch = new AMap.CitySearch() citySearch.getLocalCity(function (status, result) { if (status === 'complete' && result.info === 'OK') { // 查詢成功，result即為當前所在城市信息 AMap.plugin('AMap.Geocoder', function() { var geocoder = new AMap.Geocoder({ // city 指定進行編碼查詢的城市，支持傳入城市名、adcode 和 citycode city: result.adcode }) var lnglat = result.rectangle.split(";")[0].split(","); geocoder.getAddress(lnglat, function(status, data) { if (status === 'complete' && data.info === 'OK') { // result為對應的地理位置詳細信息 // 存入 vuex 中 self.setlocation({ addressComponent: { city: result.city, province: result.province }, formattedAddress: data.regeocode.formattedAddress }); self.setcity(data.regeocode.formattedAddress) } }) }) } }) }) } } } </script> <style lang="stylus"> #app width 100% height 100% overflow hidden background-color: #f5f5f5; </style> ~~~ 6. 如何使用 在需要使用定位的組件中寫入以下代碼：