Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图自动完成搜索

Javascript 谷歌地图自动完成搜索

javascript jquery google-maps google-maps-api-3 autocomplete

Javascript 谷歌地图自动完成搜索,javascript,jquery,google-maps,google-maps-api-3,autocomplete,Javascript,Jquery,Google Maps,Google Maps Api 3,Autocomplete,我对javascript和谷歌地图API知之甚少。我需要的是一个谷歌地图，在这里我可以按地址搜索，也可以在地图上拖放标记，以获取该位置的纵横坐标。 这段代码运行良好，它接受地址字符串，当输入时，它给出了lat，long和可拖动标记。 我真正需要的是自动完成地址搜索。谢谢 <!DOCTYPE html> <html lang="nb"> <head> <meta charset="UTF-8"> <meta http-equiv

我对javascript和谷歌地图API知之甚少。我需要的是一个谷歌地图，在这里我可以按地址搜索，也可以在地图上拖放标记，以获取该位置的纵横坐标。 这段代码运行良好，它接受地址字符串，当输入时，它给出了lat，long和可拖动标记。 我真正需要的是自动完成地址搜索。谢谢

<!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> 


拉丁美洲：
长：
$（文档）.ready（函数（e）{
//初始映射
函数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\uuu-map”）、mapOptions）；
marker=new google.maps.marker（{位置：new google.maps.LatLng（lat，long），draggable:true，map:map，title:'Test'}）；
google.maps.event.addListener（标记'dragend'，函数（事件）{
var lat=this.getPosition（）.lat（）；
var long=this.getPosition（）.lng（）；
initMap（lat，long）；
$（'.register-form__-lation-holder'）.val（lat）；
$（'.register-form__-longitud-holder'）.val（长）；
});     
}
/**
*用户位置输入更改时的地理编码
*/
$（'body'）。on（'change'，'）。register-form_uuulocation-holder'，函数（e）{
var address=$（this.val（）；
var geocoder=new google.maps.geocoder（）；
if（地理编码器）{
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
console.log（结果[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__-lation-holder'）.val（lat）；
$（'.register-form__-longitud-holder'）.val（长）；
}
否则{
警觉（“我是芬尼·丹尼·阿德莱森，我是莱登·德拉平，我是卡泰特，我是波西斯戎镇的一员。”）；
$（'.register-form__-lation-holder'）.focus（）.select（）；
}
});
}
});
var lat=$（'.register-form__-lation-holder'）.val（）；
var long=$（'.register-form__-longitude-holder'）.val（）；
initMap（lat，long）；
});         

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13
});
变量输入=/**@type{！HTMLInputElement}*/(
document.getElementById（'pac-input'）；
document.getElementById（'user_latitude'）。值=-33.8688；
document.getElementById（'user_longitude'）。值=151.2195；
var types=document.getElementById（'type-selector'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
map.controls[google.maps.ControlPosition.TOP\u LEFT].push（类型）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
var marker=new google.maps.marker({
位置：{lat:-33.8688，lng:151.2195}，
标题：'标记'，
地图：地图，
主播点：新google.maps.Point（0，-29），
真的，
动画：google.maps.animation.DROP，
});
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
//用户输入了未建议的地点的名称，然后
//按Enter键，或Place Details请求失败。
window.alert（“没有可供输入的详细信息：“+place.name+””）；
返回；
}
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；//为什么是17？因为它看起来不错。
}
marker.setIcon（/**@type{google.maps.Icon}*/({
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize：新的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'）。值=长；
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
infowindow.setContent（“”+place.name+”
“+地址）；
信息窗口。打开（地图、标记）；
});
//在单选按钮上设置侦听器以更改位置上的筛选器类型
//自动完成。