使用Google Places API自动完成,无需附近且仅特定的公司类型

时间:2018-11-28 04:14:41

标签: javascript jquery google-places-api

我对JS并不是很坚强,并且在理解Google文档方面遇到困难,但是我很少放弃并且通常可以弄清楚东西,但是我对此一无所知。

如何为特定业务类型自动完成?我只想填写“药房”的建议。

HTML

<div class="wrap clearfix">
    <input type="text" id="latitude" value="35.4794" />
    <input type="text" id="longitude" value="-97.5017" />
    <label>Pharmacy Search</label>
    <input type="text" id="textfield" />

    <div id="map"></div>

    <div id="infowindow-content">
        <img src="" width="16" height="16" id="place-icon" />
        <p id="place-name" class="title"></p>
        <p id="place-address"></p>
    </div>

</div>

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&#038;libraries=places&#038;ver=4.9.8'></script>

CSS

.clearfix:after {
    content: '.';
    visibility: hidden;
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
}

.wrap {
    display: block;
    margin: 20px auto;
    max-width: 70%;
    border: 1px solid #ddd;
    padding: 20px;
    line-height: 1.5;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #555;
}

label {
    display: block;
    position: relative;
    width: 100%;
    font-size: 16px;
}

input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    position: relative;
    width: 100%;
    border: 1px solid #ddd;
    z-index: 2;
    padding: 0 5px;
    margin: 0 0 20px;
    line-height: 30px;
    height: 32px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#map {
    display: none;
    position: relative;
    width: 100%;
    height: 330px;
}

#infowindow-content p {
    display: block;
    margin-bottom: 5px;
}

JS

function initMap() {
    var input = document.getElementById('textfield');
    var autocompleteoptions = {
        types: ['establishment']
    };
    var latitude = parseInt($('#latitude').val());
    var longitude = parseInt($('#longitude').val());
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: latitude,
            lng: longitude
        },
        zoom: 6
    });
    var autocomplete = new google.maps.places.Autocomplete(input, autocompleteoptions);
    // Bind the map's bounds (viewport) property to the autocomplete object,
    // so that the autocomplete requests use the current map bounds for the
    // bounds option in the request.
    autocomplete.bindTo('bounds', map);

    autocomplete.setComponentRestrictions({
        'country': ['us']
    });

    // Set the data fields to return when the user selects a place.
    autocomplete.setFields(
        ["name", "geometry", "icon", "formatted_address"]
    );

    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });

    autocomplete.addListener('place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            $('#map').hide();
            return;
        }
        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
            $('#map').show();
            infowindow.open(map, marker);
            infowindowContent.children['place-icon'].src = place.icon;
            infowindowContent.children['place-name'].textContent = place.name;
            infowindowContent.children['place-address'].textContent = place.formatted_address;
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);


    });

}
initMap();

0 个答案:

没有答案