高德地圖Amap搜索定位

在前一篇的基礎上加入了搜索提示,和通過搜索定位

前文:

https://mp.csdn.net/postedit/87072653

加入搜索:

1,引入js

//引入高德地圖API,多個插件用逗號分隔
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=開發者key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

2,js:



//搜索
var autoOptions = {
    input: "partyPlace"//前端搜索框
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
    map: map
}); 
AMap.event.addListener(auto, "select", select);//註冊監聽,當選中某條記錄時會觸發
function select(e) {
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);  //關鍵字查詢查詢
}

3,效果:

搜索提示:

點擊下拉框中的一項時,定位過去:

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章