Question

我对javascript和Google Maps API知之甚少。我需要的是谷歌地图，我可以通过地址搜索，也可以拖动＆amp;在地图上删除标记以获得lat＆amp;很久的那个位置。这段代码工作正常，它需要地址字符串，当输入它时会给出lat，long和Draggable Marker。我真正需要的是自动完成搜索地址。感谢。

<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head>
<body>

<form>
    <input type="text" id="user_location" name="user_location" class="register-form__location-holder"> <a href="#" class="button button--small register-wizard__map-search-button">Search adr.</a>
    <div style="width:100%;height:300px" id="register-form__map" class="register-form__map register-form__map--user"></div>
    lat: <input name="user_latitude" value="" class="register-form__latitude-holder">
    long: <input name="user_longitude" value="" class="register-form__longitude-holder">
</form>

<script>
    $(document).ready(function(e) {
        // init map
        function initMap(lat, long) {   
        var center = new google.maps.LatLng(parseFloat(lat), long);
        var mapOptions = {center: center, zoom: 16, scrollwheel: false};
        map = new google.maps.Map(document.getElementById("register-form__map"), mapOptions);
        marker = new google.maps.Marker({position: new google.maps.LatLng(lat, long), draggable:true, map: map,title: 'Test'});
            google.maps.event.addListener(marker, 'dragend', function (event) {
                var lat = this.getPosition().lat();
                var long = this.getPosition().lng();
                initMap(lat, long);
                $('.register-form__latitude-holder').val(lat);
                $('.register-form__longitude-holder').val(long);
            });     
        }
        /**
         * Geocode when user location input changes
         */
        $('body').on('change', '.register-form__location-holder', function(e) {
            var address = $(this).val();
            var geocoder = new google.maps.Geocoder();
            if (geocoder) {
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        console.log(results[0].geometry.location);
                        var lat = results[0].geometry.location.lat();
                        var long = results[0].geometry.location.lng();
                        console.log("lat="+lat);

                        initMap(lat, long);
                        $('.register-form__latitude-holder').val(lat);
                        $('.register-form__longitude-holder').val(long);
                    }
                    else {
                        alert("Kunne ikke finne denne adressen, vennligst skriv en i nærheten og dra pin'en på kartet nærmest mulig riktig posisjon.");
                        $('.register-form__latitude-holder').focus().select();
                    }
                });
            }
        });

        var lat = $('.register-form__latitude-holder').val();
        var long = $('.register-form__longitude-holder').val();
        initMap(lat, long); 

});         

    </script>


</body>
</html>

Answer 1

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -33.8688, lng: 151.2195},
            zoom: 13
        });
        var input = /** @type {!HTMLInputElement} */(
            document.getElementById('pac-input'));
        document.getElementById('user_latitude').value = -33.8688;
        document.getElementById('user_longitude').value = 151.2195;
        var types = document.getElementById('type-selector');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            position: {lat: -33.8688, lng: 151.2195},
            title: 'Marker',
            map: map,
            anchorPoint: new google.maps.Point(0, -29),
            draggable: true,
            animation: google.maps.Animation.DROP,
        });

        autocomplete.addListener('place_changed', function() {
            infowindow.close();
            marker.setVisible(false);

            var place = autocomplete.getPlace();
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            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.setIcon(/** @type {google.maps.Icon} */({
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            }));


            var lat=place.geometry.location.lat();
            var long=place.geometry.location.lng();

            document.getElementById('user_latitude').value = lat;
            document.getElementById('user_longitude').value = long;


            marker.setPosition(place.geometry.location);
            marker.setVisible(true);



            var address = '';
            if (place.address_components) {
                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
            }

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);

            infowindow.open(map, marker);
        });

        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        function setupClickListener(id, types) {
            var radioButton = document.getElementById(id);
            radioButton.addEventListener('click', function() {

                autocomplete.setTypes(types);
            });
        }

        setupClickListener('changetype-all', []);
        setupClickListener('changetype-address', ['address']);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);




        marker.addListener('drag',entreXY);
        map.addListener('click',deplacerClick);

        function entreXY(event) {
            var lat=event.latLng.lat();
            var long=event.latLng.lng();
            document.getElementById('user_latitude').value = lat;
            document.getElementById('user_longitude').value = long;
            var ss='X: '+lat+'<br/> Y: '+long;

        }

        function deplacerClick(event) {
            var lat=event.latLng.lat();
            var long=event.latLng.lng();
            marker.setPosition(new google.maps.LatLng(lat, long));
            document.getElementById('user_latitude').value = lat;
            document.getElementById('user_longitude').value = long;
            var ss='X: '+lat+'<br/> Y: '+long;

        }
    }

 #map {
            height: 50%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .controls {
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 300px;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }

        .pac-container {
            font-family: Roboto;
        }

        #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }

        #type-selector label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2cxvPQKZNiWZXWEIQXJoCsGYd9ZHuK4Q&libraries=places&callback=initMap"
        async defer></script>
<input id="pac-input" class="controls" type="text"
       placeholder="Enter a location">
<div id="type-selector" class="controls">
    <input type="radio" name="type" id="changetype-all" checked="checked">
    <label for="changetype-all">All</label>

    <input type="radio" name="type" id="changetype-establishment">
    <label for="changetype-establishment">Establishments</label>

    <input type="radio" name="type" id="changetype-address">
    <label for="changetype-address">Addresses</label>

    <input type="radio" name="type" id="changetype-geocode">
    <label for="changetype-geocode">Geocodes</label>
</div>
<div id="map"></div>
<form>

    lat: <input name="user_latitude" id="user_latitude" value="" class="register-form__latitude-holder">
    long: <input name="user_longitude" id="user_longitude" value="" class="register-form__longitude-holder">
</form>

SOURCE INSPIRATION

谷歌地图自动完成搜索

1 个答案: