Google maps v3 在 jQuery mobile 和 PhoneGap 上具有自动完成功能

Posted 2023-05-09

【中文标题】Google maps v3 在 jQuery mobile 和 PhoneGap 上具有自动完成功能

【英文标题】：Google maps v3 with autocomplete at jQuery mobile and PhoneGap

【发布时间】：2013-12-28 09:23:13

【问题描述】：

我正在使用 JQM 和 PhoneGap 开发一个应用程序。

首页： - 用户可以通过输入地址来搜索街道或城市。输入字段应具有自动完成功能。 - 此外，搜索框下方应显示旧搜索（已使用的地址）

用户输入地址后，应该会打开第二个页面

第二页： - 此页面显示输入地址的谷歌地图。

---

我该怎么做？

我找到了这个帖子： PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles? 我认为这可能是我的第二页： http://jsfiddle.net/Gajotres/GHZc8/

编辑：*** 说我应该通过代码伴随 jsfiddle.net。这是JS部分：

$(document).on('pageshow', '#map', function (event) 
    max_height();
        navigator.geolocation.getCurrentPosition(onSuccess, onError,'enableHighAccuracy':true,'timeout':20000);
);

function max_height() 
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) 
        content_height -= (content.outerHeight() - content.height());
     
    $.mobile.activePage.find('[data-role="content"]').height(content_height);



function onSuccess(position)        
    var minZoomLevel = 15;

    var map = new google.maps.Map(document.getElementById('map_canvas'), 
        zoom: minZoomLevel,
        center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    );    


function onError() 
    alert('Error');

---

但是，第一个带有自动填充功能的搜索页怎么可能呢？

在这个页面：http://jquery-ui-map.googlecode.com/svn../trunk/demos/jquery-google-maps-mobile.html Google Maps v3 有一些示例。但现在问题来了。我找不到使用自动完成功能进行正常搜索的解决方案。只有一个带有自动完成功能的地方搜索示例。那不可能吗？

【参考方案1】：

您需要导入 jQuery UI，这是我使用的一些代码

// Add autocomplete to an input box
function addAutocomplete( input ) 
    input.autocomplete(
        // source is the list of input options shown in the autocomplete dropdown.
        // see documentation: http://jqueryui.com/demos/autocomplete/
        source: function(request,response) 
            // the geocode method takes an address or LatLng to search for
            // and a callback function which should process the results into
            // a format accepted by jqueryUI autocomplete
            geocoder.geocode( 'address': request.term , function(results, status) 
                response($.map(results, function(item) 
                    return 
                        label: item.formatted_address, // appears in dropdown box
                        value: item.formatted_address, // inserted into input element when selected
                        geocode: item                  // all geocode data
                    
                ));
            )
        ,
        select: function(event, ui) 
            // event triggered when drop-down option selected
        
    );

【讨论】：

抱歉，不知道怎么实现。

创建城市名称数据集，并将它们添加到 jquery ui 数组中。就是这样。