精品人妻网站,超碰免费97,天天搞天天拍,成人av影视在线观看国产高清,一级毛片全部免费播放特黄,久久久91人妻无蜜桃码,情趣内裤操逼网站在线,亚洲一级电影在线

作者：文心雕刺

來源：SegmentFault 思否社區(qū)

公司pc端有一個地圖選址及查看地圖功能，這個是幾個月前就開發(fā)完了，最近完善了一下，先上最終效果吧。

選擇省市區(qū)填寫詳細地址進入點擊確認坐標打開地圖彈框

根據(jù)傳入的地址查詢到了地址可以查看更多地址，可以點擊地圖查看周邊，點擊確認，獲取坐標。

這是查看地址

好了，上實現(xiàn)代碼。



????
??????"main__footer">
??????????????????@click="onCloseModal()"
??????????class="x-ui-btn?add__cancel"
??????????size="medium">關(guān)閉
??????


????
??

以上是dom，用的是element-ui的dialog。

進入彈框后，編輯加載需要用到的地圖插件，AMap.Geocoder和AMap.PlaceSearch，因為一開始做這個是時候，單獨使用了一種AMap.Geocoder，很多高德地圖上能查到的地址都定位不到，于是查看了文檔的常見問題，里面的描述就是：“高德地圖的搜索是復(fù)合型搜索......位置搜索的研發(fā)中，可以先進行地址解析，再進行關(guān)鍵詞搜索，以得到更優(yōu)的結(jié)果。” 查看則直接根據(jù)外部傳入的經(jīng)緯度定位，初始化地圖。當(dāng)然我這里是在保證AMap和AMapUI都已經(jīng)加載到的情況下再做的，否則就會報錯，我用了比較笨的辦法，就是定時器不斷執(zhí)行加載的代碼，然后在這里一旦兩個都有了，就停止定時器，比較笨的辦法了。

進入彈框后，編輯加載需要用到的地圖插件，查看則直接根據(jù)經(jīng)緯度定位，初始化地圖。

下面就是編輯坐標時的邏輯了

interval()?{
??????this.timer?=?setInterval(function()?{
????????this.awaitPlaceSearch();
??????}.bind(this),?50)
????},

????awaitPlaceSearch()?{
??????if(this.placeSearch?&&?this.geoCoder)?{
????????clearInterval(this.timer);
????????this.isUseNearBy?=?false;
????????this.placeSearch.search(this.handleCityName,?(status,?result)?=>?{
??????????if?(status?===?'complete')?{
????????????if(result.poiList.pois.length)?{
??????????????if(result.poiList.pois.length?%?this.pageSize?!==?0)?{
????????????????this.isUseNearBy?=?true;
????????????????this.bottomLineShow?=?true;
??????????????}?else?{
????????????????this.isUseNearBy?=?false;
????????????????this.bottomLineShow?=?false;
??????????????}
??????????????const?geos?=?result.poiList.pois[0].location;
??????????????this.center?=?[geos.lng,?geos.lat];
??????????????this.getAreaInfo('location',?(res)?=>?{
????????????????this.lists?=?result.poiList.pois//將查詢到的地點賦值
????????????????this._initScroll();
????????????????this.getAddress(0);
????????????????this.createdMap([this.ruleForm.long,?this.ruleForm.lat]);
????????????????this.addMarker();
??????????????})
????????????}?else?{
??????????????if(result.cityList?&&?result.cityList.length?>?1)?{
????????????????this.lists?=?[];
????????????????this.onCloseModal();
????????????????this.$message.info(`當(dāng)前搜索地址在${result.cityList.length}個城市有若干結(jié)果，請明確后再搜索`);
??????????????}?else?{
????????????????this.lists?=?[];
????????????????this.onCloseModal();
????????????????this.$message.info('未能查詢到該地址，請更換關(guān)鍵字查詢');
??????????????}
????????????}
??????????}?else?if(status?===?'no_data')?{
????????????this.$message.warning(`您輸入的地址“${this.cityName}”，未查詢到相關(guān)信息`);
????????????this.getAreaInfo('address',?(res)?=>?{
??????????????this.lists?=?[
????????????????{
??????????????????location:?{
????????????????????lng:?res.geocodes[0].location.lng,
????????????????????lat:?res.geocodes[0].location.lat,
??????????????????},
??????????????????name:?res.geocodes[0].formattedAddress,
??????????????????address:?'',
????????????????}
??????????????]
??????????????this.center?=?[res.geocodes[0].location.lng,?res.geocodes[0].location.lat]
??????????????this._initScroll();
??????????????this.getAddress(0);
??????????????this.createdMap([this.ruleForm.long,?this.ruleForm.lat]);
??????????????this.addMarker();
??????????????this.isUseNearBy?=?true;
??????????????this.bottomLineShow?=?true;
????????????});
??????????}?else?{
????????????this.fixedPosition();//精準定位或IP地址定位
??????????}
????????})?
??????}
????},

當(dāng)然也是在保證this.placeSearch和this.geoCoder（即AMap.Geocoder和AMap.PlaceSearch）都加載到，同樣也是上面說的笨辦法。我是先用AMap.PlaceSearch.search方法，通過關(guān)鍵字查詢傳入的地址，如果查詢到，則確定新的地圖中心點經(jīng)緯度，再通過AMap.Geocoder.getAddress方法傳入新的地圖中心點經(jīng)緯度，解析出省市區(qū)信息，也可能關(guān)鍵字查詢不明確（未明確省市區(qū)），比如只寫了xx路，就有可能在全國多處都有結(jié)果，則會關(guān)閉彈框，提示明確后再查詢，還可能關(guān)鍵字根本就查詢不到，AMap.PlaceSearch.search返回no_data，則傳入關(guān)鍵字使用AMap.Geocoder.getLocation方法，解析關(guān)鍵字所在城市，總之這里的邏輯就是AMap.Geocoder和AMap.PlaceSearch搭配使用。此處this.getAreaInfo方法是解析地址省市區(qū)的方法，設(shè)置了一個回調(diào)函數(shù)作為參數(shù)：

//依賴高德該接口獲得省市區(qū)信息
????getAreaInfo(type,?callback)?{
??????if(type?===?'address')?{?//?在編輯的情況下通過地址名稱查詢
????????this.geoCoder.getLocation(this.handleCityName,?(status,?result)?=>?{
??????????if?(status?===?'complete'?&&?result.geocodes.length)?{
????????????this.ruleForm.regeocode.adcode?=?result.geocodes[0].adcode
????????????this.ruleForm.regeocode.province?=?result.geocodes[0].addressComponent.province
????????????this.ruleForm.regeocode.city?=?result.geocodes[0].addressComponent.city?==?''???result.geocodes[0].addressComponent.province?:?result.geocodes[0].addressComponent.city
????????????this.ruleForm.regeocode.district?=?result.geocodes[0].addressComponent.district;
????????????callback(result);
??????????}?else?if(status?===?'no_data')?{
????????????this.lists?=?[];
????????????this.onCloseModal();
????????????this.$message.info('未能查詢到該地址，請更換關(guān)鍵字查詢');
??????????}?else?{
????????????this.fixedPosition();//精準定位或IP地址定位
??????????}
????????});
??????}?else?if(type?===?'location')?{?//?在查看的情況下通過經(jīng)緯度查詢
????????this.geoCoder.getAddress(this.center,?(status,?result)?=>?{
??????????if?(status?===?'complete'?&&?result.regeocode?&&?result.regeocode.addressComponent)?{
????????????this.ruleForm.regeocode.adcode?=?result.regeocode.addressComponent.adcode
????????????this.ruleForm.regeocode.province?=?result.regeocode.addressComponent.province
????????????this.ruleForm.regeocode.city?=?result.regeocode.addressComponent.city?==?''???result.regeocode.addressComponent.province?:?result.regeocode.addressComponent.city
????????????this.ruleForm.regeocode.district?=?result.regeocode.addressComponent.district;
????????????callback(result);
??????????}?else?{
????????????this.fixedPosition();//精準定位或IP地址定位
??????????}
????????});
??????}
????},

以上在獲取到地址時都會設(shè)置為一個地址列表，設(shè)置在地圖左側(cè)，供用戶選擇，滾動使用better-scroll，可以上拉加載進行分頁，這里不展開說了。

通過以上步驟，大部分情況下都能查詢到精確的關(guān)鍵字，一部分高德沒有收錄的企業(yè)信息，也能定位到所在街道鄉(xiāng)鎮(zhèn)省市區(qū)。此外還在點擊地圖的時候觸發(fā)了AMap.PlaceSearch.searchNearBy方法查詢鼠標點擊處的周邊，作為補充：

//?查看更多，此方法也給上拉加載使用
searchMore(e)?{
??????if(e)?{
????????this.isUseNearBy?=?true;
????????this.placeSearch.opt.pageIndex?=?1;
????????this.center?=?[e.lnglat.getLng(),?e.lnglat.getLat()];
??????}?else?{
????????this.placeSearch.opt.pageIndex?+=?1;
??????}
??????this.geoCoder.getAddress(this.center,?(status,?result)?=>?{
????????if?(status?===?'complete'?&&?result.info?===?'OK')?{
??????????let?addressComponent?=?result.regeocode.addressComponent;
??????????this.ruleForm.regeocode.adcode?=?addressComponent.adcode
??????????this.ruleForm.regeocode.province?=?addressComponent.province
??????????this.ruleForm.regeocode.city?=?addressComponent.city?==?''???addressComponent.province?:?addressComponent.city
??????????this.ruleForm.regeocode.district?=?addressComponent.district;

??????????let?cityName?=?this.isUseNearBy???''?:?this.handleCityName;
??????????if(this.isUseNearBy)?{
????????????this.placeSearch.searchNearBy(cityName,?this.center,?1000,?(status,?result)?=>?{
??????????????this.searchCallBack(status,?result,?e)
????????????});
??????????}?else?{
????????????this.placeSearch.search(cityName,?(status,?result,?e)?=>?{
??????????????this.searchCallBack(status,?result)
????????????});
??????????}
????????}?else?{
??????????this.emptyLocationData();
????????}
??????})
????},
????searchCallBack(status,?result,?event)?{
??????if?(status?===?'complete'?&&?result.poiList.pois.length)?{
????????if(event)?{
??????????this.lists?=?result.poiList.pois;
??????????if(this.lists.length?%?this.pageSize?!==?0)?{
????????????this.bottomLineShow?=?true;
??????????}?else?{
????????????this.bottomLineShow?=?false;
??????????}
??????????this.getAddress(0);
??????????if(this.scroll)?{
????????????this.scroll.scrollTo(0,?0);
????????????this.scroll.finishPullUp();
??????????}?else?{
????????????this._initScroll();
??????????}
??????????this.addMarker();
????????}?else?{
??????????this.lists?=?concat(this.lists,?result.poiList.pois);
??????????if(this.lists.length?%?this.pageSize?!==?0)?{
????????????this.bottomLineShow?=?true;
??????????}?else?{
????????????this.bottomLineShow?=?false;
??????????}
??????????this.originalStatus();
????????}
??????}?else?{
????????this.bottomLineShow?=?true;
??????}
????},

主要的部分就是上面這些，還有一些里面用到的方法，我截幾張圖吧，第一次寫文章，寫的比較亂。

點擊左下角閱讀原文，到?SegmentFault 思否社區(qū)?和文章作者展開更多互動和交流。

-?END -

vue + 高德地圖開發(fā)地圖選址及查看地址組件