地理位置输入提示（不显示地图）

Posted 2022-09-24 不去天涯

前言

虽然，现如今不做GIS了，但是遇到了一个地理位置自动补全的功能，补充在这个系列里，或许是最后一篇GIS的文章了。

地理位置自动补全在哪里用

做GIS的项目一般是少不了地图的，在做搜索的时候大多也是把搜索栏放在地图的上面漂浮，搜索结果直接展示在地图中，定位到地图中心位置。
但是在非GIS的行业里，很多时候放一个地图是没有必要和略显多余的，但是地理位置优势如此的重要，可以说定位和自动位置补全功能在当今的互联网时代是随处可见。一个再小的，在Q的APP也要带上定位功能，涉及到输入地址的为了方便一般也会带上地理位置自动补全功能。或许这就是马云所说的，地图事业部上场的时候就还没有到，但是未来是他们的（非原话 :(）。
这里贴出来几个示例的APP页面，以下是一种比较典型的出现形式：

采用高德地图实现

这里去看我们在GIS系统中常见的实现方式：

http://lbs.amap.com/api/javascript-api/example/l/1207-2/

这里去看所有其他的可能调用方式（3种）：

http://lbs.amap.com/api/javascript-api/jsapi-markdown/输入提示/

使用中遇到的问题

我这里遇到的是在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" );
          
        );