zoukankan      html  css  js  c++  java
  • google api autocomplete

    <input class="flex-item" id="autocomplete" placeholder="address, zip or city" onFocus="geolocate()" type="text"></input>



    var autocomplete;

    function geolocate() {
    if(!autocomplete){
    autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),{ types: ['geocode'] });
    }
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var geolocation = new google.maps.LatLng(
    position.coords.latitude, position.coords.longitude);
    var circle = new google.maps.Circle({
    center: geolocation,
    radius: position.coords.accuracy
    });
    autocomplete.setBounds(circle.getBounds());
    });
    }
    }

    <body onload="initialize()">
    <form class="form-address" id="address">

    <!-- Search Field -->
    <div class="flex-container c-1column" id="locationField">
    <label>Search for your address</label>
    <input class="flex-item" id="autocomplete" placeholder="address, zip or city" onFocus="geolocate()" type="text"></input>
    </div>

    <!-- Street Address -->
    <div class="flex-container">
    <label>Street address</label>
    <div class="flex-item c-2column"><input id="streetNo" ></input></div>
    <div class="flex-item c-2column"><input id="route" ></input></div>
    </div>

    <!-- City -->
    <div class="flex-container">
    <label>City</label>
    <input class="flex-item c-1column" id="city" ></input>
    </div>

    <!-- State & Zip -->
    <div class="flex-container">
    <div class="flex-item c-2column">
    <label>State</label>
    <input id="state" ></input>
    </div>
    <div class="flex-item c-2column">
    <label>Zip code</label>
    <input id="zipcode" ></input>
    </div>
    </div>

    <!-- Country -->
    <div class="flex-container">
    <label>Country</label>
    <input class="flex-item c-1column" id="country" ></input>
    </div>

    </form>
    </body>

    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'
    };
    var myForm = {
    street_number: 'streetNo',
    route: 'route',
    locality: 'city',
    administrative_area_level_1: 'state',
    country: 'country',
    postal_code: 'zipcode'
    };

    function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),{ types: ['geocode'] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
    });
    }

    // [START region_fillform]
    function fillInAddress() {

    var place = autocomplete.getPlace();
    /* for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
    } */

    // 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 (componentForm[addressType]) {
    var val = place.address_components[i][componentForm[addressType]];
    // alert(myForm[addressType])
    document.getElementById(myForm[addressType]).value = val;
    }
    }
    }

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

  • 相关阅读:
    ireport +jasperreport 中文不能显示
    ireport +jasperreport 中文不能显示
    JDBC的批量处理语句
    tattoo实现adhoc连接
    tattoo实现adhoc连接
    网络突然掉线或者不小心putty被关掉等等原因 造成安装过程被中断怎么办?
    网络突然掉线或者不小心putty被关掉等等原因 造成安装过程被中断怎么办?
    Linux SSH命令大全,新手必看SSH命令
    修改SSH端口和修改vsftpd端口更安全
    Linux SSH命令大全,新手必看SSH命令
  • 原文地址:https://www.cnblogs.com/jayruan/p/5995071.html
Copyright © 2011-2022 走看看