Google Maps V3 自动完成输入 jquery Mobile

Question

我正在尝试让自动完成功能在一个简单的输入文本框上工作。我让它适用于一个文本框，但我有第二个（往返位置）它会引发错误。

我不认为我的代码不是很精简，我想知道是否有更简洁的方法可以让它工作。我认为我的重复代码可能是问题的一部分。 'to' 输入框不起作用，也不会抛出任何错误。

<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>

我尝试了另一种填充自动完成功能的方法，但根本无法解决。这是我让它工作的关闭，它适用于'from'输入，但不适用于'to'输入。

任何建议将不胜感激。

谢谢！

Answer 1

我改变了我的方法。由于我已经拥有应用程序中的所有地理编码信息，我真的只想填充文本框。我将此代码添加到了我想要的初始化函数中。

 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);