1. 程式人生 > >地理位置輸入提示(不顯示地圖)

地理位置輸入提示(不顯示地圖)

前言

雖然,現如今不做GIS了,但是遇到了一個地理位置自動補全的功能,補充在這個系列裡,或許是最後一篇GIS的文章了。

地理位置自動補全在哪裡用

做GIS的專案一般是少不了地圖的,在做搜尋的時候大多也是把搜尋欄放在地圖的上面漂浮,搜尋結果直接展示在地圖中,定位到地圖中心位置。
但是在非GIS的行業裡,很多時候放一個地圖是沒有必要和略顯多餘的,但是地理位置優勢如此的重要,可以說定位和自動位置補全功能在當今的網際網路時代是隨處可見。一個再小的,在Q的APP也要帶上定位功能,涉及到輸入地址的為了方便一般也會帶上地理位置自動補全功能。或許這就是馬雲所說的,地圖事業部上場的時候就還沒有到,但是未來是他們的(非原話 :()。
這裡貼出來幾個示例的APP頁面,以下是一種比較典型的出現形式:
未輸入文字前


輸入文字後,提示補全

採用高德地圖實現

這裡去看我們在GIS系統中常見的實現方式:

這裡去看所有其他的可能呼叫方式(3種):

使用中遇到的問題

我這裡遇到的是在web頁面中嵌入輸入提示的這個功能,按理說高德提供的第2種方式恰好滿足我的需求了。但遺憾的是高德的這個功能在iphone上不能彈出命中的地址列表。無可奈何之下,採用了jQuery UI的combobox配合高德給出的第三種實現方式來完成的。

        AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
          var autoOptions = {
            city: "北京"
// 城市,預設全國 }; autocom= new AMap.Autocomplete(autoOptions); }); $( "#addresscombo" ).autocomplete({ source: function( request, response ) { autocom.search(request.term, function(status, result){ response($.map(result.tips,function
(item){
return { label:item.district + item.name, value:item.district + item.name } })); }); }, minLength: 2, select: function( event, ui ) { $('#address').val(ui.item.value); if(isIphone()){ $('body,html').animate({scrollTop:0},260); }else{ $('#addressSelect').hide(); } }, focus: function( event, ui ) { $('#address').value = ''; }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } });