Google Maps V3自动完成输入jQuery Mobile [英] Google Maps V3 autocomplete input jquery Mobile
问题描述
我试图让自动完成工作在一个简单的输入文本框上。我有一个文本框工作,但我有第二个(到和从位置),它是抛出错误。
I'm trying to get the autocomplete to work on a simple input text box. I have it working for one text box, but I have a second (to and from location) which it is throwing errors.
我的代码不是很精简我不喜欢我想,我想知道是否有一个更清洁的方法来实现这个工作。我认为我的重复代码可能是问题的一部分。 'to'输入框不起作用,并且不会引发错误。
My code isn't very streamlined I don't think and I'm wondering if there is a cleaner method to get this working. I think my repetitive code maybe part of the problem. The 'to' input box doesn't work and no errors are thrown.
<script type="text/javascript">
$(document).on("pageinit", "#map_page", function () {
initialize();
layersOFFonload();
});
$(document).on('click', '#getDirectionsSubmit', function (e) {
e.preventDefault();
calculateRoute();
});
$(document).on('click', '#getCurrentLoc', function (e) {
e.preventDefault();
findCurrentPosition();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
var geocoder = new google.maps.Geocoder();
var transitRoutesLayerKML = [];
var placeSearch, autocomplete;
function initialize() {
// set the default center of the map
var mapCenter = new google.maps.LatLng(55.1669513, -118.8031093);
// set route options (draggable means you can alter/drag the route in the map)
var rendererOptions = { draggable: true };
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
//updateMapSize(mapCenter);
// set the display options for the map
var myOptions = {
mapTypeControl: false,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
// add the map to the map placeholder
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// bind the map to the directions
directionsDisplay.setMap(map);
// point the directions to the container for the direction details
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
// add a marker to the map on the geolocated point
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
//draggable: true,
map: map
});
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: true,
map: map
};
transitRoutesLayerKML[0] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route1.kml', kmlOptions);
transitRoutesLayerKML[1] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route2.kml', kmlOptions);
transitRoutesLayerKML[2] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route3.kml', kmlOptions);
transitRoutesLayerKML[3] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route4.kml', kmlOptions);
transitRoutesLayerKML[4] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route5.kml', kmlOptions);
transitRoutesLayerKML[5] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route6a.kml', kmlOptions);
transitRoutesLayerKML[6] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route6b.kml', kmlOptions);
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(document.getElementById('from')), (document.getElementById('to')), { types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress();
});
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (addressType) {
var val = place.address_components[i][addressType];
document.getElementById(addressType).value = val;
}
}
}
function findCurrentPosition() {
if (navigator.geolocation) {
// when geolocation is available on your device, run this function
navigator.geolocation.getCurrentPosition(foundYou, notFound);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
} else {
// when no geolocation is available, alert this message
alert('Geolocation not supported or not enabled.');
}
}
function foundYou(position) {
// convert the position returned by the geolocation API to a google coordinate object
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// then try to reverse geocode the location to return a human-readable address
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// if the geolocation was recognized and an address was found
if (results[0]) {
// this will update the position of the marker
marker.setPosition(latlng);
// compose a string with the address parts
var address = results[0].address_components[0].long_name + ' ' + results[0].address_components[1].long_name + ', ' + results[0].address_components[3].long_name
// set the located address to the link, show the link and add a click event handler
// onclick, set the geocoded address to the start-point formfield
//$('#from').text(address);
$('#from').val(address);
// call the calcRoute function to start calculating the route
}
} else {
// if the address couldn't be determined, alert and error with the status message
alert("Geocoder failed due to: " + status);
}
});
}
<div id="fromlocationField" data-role="my-ui-field-contain">
<input type="text" id="from" placeholder="From Address, (eg, 10205 - 98street)" value="" /><button id="getCurrentLoc" data-icon="star">Use Current Location</button>
</div>
<div id="tolocationField" data-role="my-ui-field-contain">
<input type="text" id="to" placeholder="To Destination (eg, 10205 - 98street)" value="" />
</div>
<a data-icon="search" data-role="button" href="#" id="getDirectionsSubmit">Get directions</a>
< div id =tolocationFielddata-role =my-ui-field-contain>
< input type =textid =toplaceholder =To Destination(eg,10205 - 98street)value =/>
< / div>
< a data-icon =searchdata-role =buttonhref =#id =getDirectionsSubmit>获取路线< / a>
我尝试了一种填充自动填充的不同方法,但根本无法解决它。这是关闭我已经得到它的工作,它在'从'输入,但不是'到'输入。
Any advice would be greatly appreciated.
任何意见将不胜感激。
谢谢!
Thanks!
推荐答案
我改变了我的方法。由于我已经拥有应用程序中的所有地理编码信息,我只是想填充文本框。
I changed my approach. Since I already have all the geocode information in the application I really just wanted to populate the text boxes. I added this code to the initialize function which does as I would like.
var inputStart = document.getElementById('from');
var inputDestination = document.getElementById('to');
var options = {componentRestrictions: {country: 'ca'}};
new google.maps.places.Autocomplete(inputStart, options);
new google.maps.places.Autocomplete(inputDestination, options);
这篇关于Google Maps V3自动完成输入jQuery Mobile的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!