我正在使用JQM和PhoneGap开发应用程序。
第一页: - 用户可以通过输入地址来搜索街道或城市。输入字段应具有自动完成功能。 - 此外,旧搜索(已使用的地址)应显示在搜索框
下方用户输入地址后,第二页应该打开
第二页: - 此页面显示输入地址的谷歌地图。
我该怎么做?
我找到了这个帖子: PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles? 我想这可能是我的第二页: http://jsfiddle.net/Gajotres/GHZc8/
编辑:StackOverflow说我应该通过代码陪伴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有一些示例。但现在出现了问题。我找不到使用自动完成功能进行常规搜索的解决方案。只有一个自动填充的地方搜索示例。这不可能吗?
答案 0 :(得分:-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
}
});
}