html Google地图自动填充功能

Posted 2021-05-11

/**
* MivaGoogleMapsAutocomplete
* 
* Integrates Google Maps Address Autocomplete on Miva Merchant OCST Checkout Page
*
* @author Gassan Idriss <[e-mail]>
*/
function MivaGoogleMapsAutocomplete(input, onSelection, options)
{
    this.log_tag = 'MivaGoogleMapsAutocomplete';

    this.options = {
        debug: false,
        biased: false,  // Bias the autocomplete object to the user's geographical location, as supplied by the browser's 'navigator.geolocation' object.
    };

    this.address_struct = {
        street_number:              'short_name',
        route:                      'long_name',
        locality:                   'long_name',
        administrative_area_level_1:'short_name',
        administrative_area_level_2:'long_name',
        country:                    'short_name',
        postal_code:                'short_name'
    };

    if(typeof $ == 'undefined'){
        this.log('jQuery Is Required');
        return;
    }

    if(typeof options != 'undefined'){
        $.extend(this.options, options);
    }
    
    if(typeof google.maps != 'object') {
        this.log('Google Maps Library Not Loaded');
        return false;
    }

    if(typeof onSelection != 'function') {
        this.log('onSelection Argument Must Be A Callable');
        return false;
    }
    
    this.onSelection = onSelection;
    this.input   = document.getElementById(input);
        
    if(!this.input) {
        this.log('AutoComplete Address Input Field Not Found With ID ' + input);
        return false;
    }

    this.init();
}

MivaGoogleMapsAutocomplete.prototype.init = function()
{
    if(this.input){
        var self = this;

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

        google.maps.event.addListener(this.autocomplete, 'place_changed', function() {
            self.processSelection(this.getPlace());
        });

        if (this.options.biased == true && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                self.autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
            });
        }

        // prevent "enter" key from submitting the form
        $(this.input).keypress(function(e) {
            if (e.which == "13") { 
                e.preventDefault();
            }       
        });

    } else {
        this.log('Could Not Find Address Field');
    }
}

MivaGoogleMapsAutocomplete.prototype.processSelection = function (place) {

    var builtAddress = {};

    if(typeof place == 'undefined') {
        return false;
    }

    if(typeof place.address_components == 'undefined') {
        return false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (this.address_struct[addressType]) {
            builtAddress[addressType] = place.address_components[i][this.address_struct[addressType]];
        }
    }

    builtAddress['original_components'] = place.address_components;

    if(typeof this.onSelection == 'function') {
        this.onSelection(builtAddress, this);

        // this is in case they use a keyboard (or phone?)
        // to select and blur event is triggered, it gets
        // populated with a complete address. We capture the
        // value then set a short timeout to set it back.
        var self = this;
        var value = this.input.value;
        $(this.input).trigger('blur');  
        setTimeout(function () { self.input.value = value; }, 10);
    } else {
        this.log('onSelection parameter is not a javascript callable');
    }
}

MivaGoogleMapsAutocomplete.prototype.log = function (msg) {
    if(this.options.debug){
        console.log(this.log_tag, msg);
    }
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript" src="../js/googlemapsautocomplete.js"></script>
<script>
$( document ).ready(function () {
    var shippingA = new MivaGoogleMapsAutocomplete('l-ShipAddress1', function(address, obj) {
        var $form = $('#js-ocst-form');
        $form.find("#l-ShipAddress1").val(address.street_number + ' ' + address.route);
        $form.find('#l-ShipCity').val(address.locality);
        $form.find('#l-ShipZip').val(address.postal_code); $form.find('#l-ShipCountry').val(address.country);
        if(address.country == 'US') {
            $form.find('#l-ShipStateSelect').val(address.administrative_area_level_1);
        } else {
            $form.find('#l-ShipStateSelect').val(address.administrative_area_level_1);
        }
    }, {
        debug: true,
        biased: false,
    });
    var billingA = new MivaGoogleMapsAutocomplete('l-BillAddress1', function(address, obj) {
        var $form = $('#js-ocst-form');
        $form.find("#l-BillAddress1").val(address.street_number + ' ' + address.route);
        $form.find('#l-BillCity').val(address.locality);
        $form.find('#l-BillZip').val(address.postal_code);
	$form.find('#l-BillCountry').val(address.country); if(address.country == 'US') {
            $form.find('#l-BillStateSelect').val(address.administrative_area_level_1);
        } else {
            $form.find('#l-BillStateSelect').val(address.administrative_area_level_1);
        }
    }, {
        debug: true,
        biased: false,
    });
});
</script>