Question

我有问题，该如何处理地图的自动完成功能？我不知道该怎么解决。这是代码：

var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name',
    long: 'long_name',
    latitude: 'long_name'
};

function initAutocomplete() {


    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -33.8688, lng: 151.2195},
        zoom: 13
    });

    var autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')),
            {types: ['geocode']});

    autocomplete.addListener('place_changed', fillInAddress);


    var input = document.getElementById('autocomplete');

    var autocomplete = new google.maps.places.Autocomplete(input);
    var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });

    // MAP  
    autocomplete.addListener('place_changed', function () {

        var place = autocomplete.getPlace();

        if (!place.geometry) {
            window.alert("No details available for input: '" + place.name + "'");
            return;
        }
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
        }
        marker.setPosition(place.geometry.location);
    });
    // MAP  
}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
    var long = place.geometry.location.lng();
    var lat = place.geometry.location.lat();

// console.warn('Warning: I didn\'t test this code!');

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
    document.getElementById("long").value = long;
    document.getElementById("latitude").value = lat;
}

function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
        });
    }
}

我想得到：

Google地图（https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete）
自动补全
自动完成地址表格（https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform）

全部合为一体：）如何做到？

Answer 1

问题解决了，那很容易。答案是：

var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name',
    long: 'long_name',
    latitude: 'long_name'
};

function initAutocomplete() {

    var autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')),
            {types: ['geocode']});

    var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 10
        });

        var input = document.getElementById('autocomplete');           
        var autocomplete = new google.maps.places.Autocomplete(input);
        var marker = new google.maps.Marker({
          map: map,
          anchorPoint: new google.maps.Point(0, -29),
          animation: google.maps.Animation.DROP,
        });


        autocomplete.addListener('place_changed', function() {

            var place = autocomplete.getPlace();    
            var place = autocomplete.getPlace();
            var long = place.geometry.location.lng();
            var lat = place.geometry.location.lat();

            for (var component in componentForm) {
                document.getElementById(component).value = '';
                document.getElementById(component).disabled = false;
            }

            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }

            document.getElementById("long").value = long;
            document.getElementById("latitude").value = lat;

            if (!place.geometry) {
              window.alert("No details available for input: '" + place.name + "'");
              return;
            }

            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
            }marker.setPosition(place.geometry.location);
        });
    }


function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
        });
    }
}

全部。

带地图的自动填写地址表格

1 个答案: