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