У меня есть код, чтобы заставить местоположение геокода работать как автозаполнение , но дело в том, что мне нужны результаты, которые будут напечатаны в статическом списке ниже текстового поля (где вы пишете адрес, который вы ищете) , а не как автозаполнение, которое оно показывает, когда вы пишете, и закрывается, когда вы фокусируете любой другой элемент управления.
Наконец, я просто хочу результаты геолокации во внешнем списке , а не как автозаполнение. Я гуглил это несколько дней и до сих пор ничего не нашел. Так что, если у кого-то из вас есть идея, как этого добиться, я буду очень признателен Может быть, это просто, но мои знания в jquery очень плохие, я просто не могу понять этот язык.
ПО ЗАПРОСУ ПОЛЬЗОВАТЕЛЯ:
Вот код, который я использую на своей веб-странице:
<script type="text/javascript">
$().ready(function() {demo2();});
// the select function uses the viewport of the chosen location to relocate the map
function demo2() {
var map = new google.maps.Map(document.getElementById("demo2_map"), { mapTypeId: google.maps.MapTypeId.ROADMAP });
$('#demo2_location').geo_autocomplete({
select: function(_event, _ui) {
if (_ui.item.viewport) map.fitBounds(_ui.item.viewport);}
});
}
</script>
Вот код, который я использую для создания автозаполнения с именем autocomplete.js :
$.widget( "ui.geo_autocomplete", {
// setup the element as an autocomplete widget with some geo goodness added
_init: function() {
this.options._geocoder = new google.maps.Geocoder; // geocoder object
this.options._cache = {}; // cache of geocoder responses
this.element.autocomplete(this.options);
// _renderItem is used to prevent the widget framework from escaping the HTML required to show the static map thumbnail
this.element.data('autocomplete')._renderItem = function(_ul, _item) {
return $('<li></li>').data('item.autocomplete', _item).append(this.options.getItemHTML(_item)).appendTo(_ul);
};
},
// default values
options: {
geocoder_region: '', // filter to a specific region, e.g. 'Europe'
geocoder_types: 'locality,political,country', // array of acceptable location types, see http://code.google.com/apis/maps/documentation/javascript/services.html#GeocodingAddressTypes
geocoder_address: true, // true = use the full formatted address, false = use only the segment that matches the search term
minLength: 3, // see http://jqueryui.com/demos/autocomplete/#option-minLength
delay: 300, // see http://jqueryui.com/demos/autocomplete/#option-delay
// callback function to get autocomplete results
source: function(_request, _response) {
if (_request.term in this.options._cache) {
_response(this.options._cache[_request.term]);
} else {
var self = this;
var _address = _request.term + (this.options.geocoder_region ? ', ' + this.options.geocoder_region : '');
this.options._geocoder.geocode({'address': _address}, function(_results, _status) {
var _parsed = [];
if (_results && _status && _status == 'OK') {
var _types = self.options.geocoder_types.split(',');
$.each(_results, function(_key, _result) {
// if this is an acceptable location type with a viewport, it's a good result
if (self.options.geocoder_address) {
_place = _result.formatted_address;
} else {
// place is first matching segment, or first segment
var _place_parts = _result.formatted_address.split(',');
var _place = _place_parts[0];
$.each(_place_parts, function(_key, _part) {
if (_part.toLowerCase().indexOf(_request.term.toLowerCase()) != -1) {
_place = $.trim(_part);
return false; // break
}
});
}
_parsed.push({
value: _place,
label: _result.formatted_address,
viewport: _result.geometry.viewport
});
});
}
self.options._cache[_request.term] = _parsed;
_response(_parsed);
});
}
},
// returns the HTML used for each autocomplete list item
getItemHTML: function(_item) {
return '<a>'+_item.label+'</a>';
}
}
});
Спасибо.