Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/366.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用谷歌地图api一次点击即可获得完整地址和郊区的lat lng_Javascript_Jquery_Google Maps - Fatal编程技术网

Javascript 使用谷歌地图api一次点击即可获得完整地址和郊区的lat lng

Javascript 使用谷歌地图api一次点击即可获得完整地址和郊区的lat lng,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我目前正在使用谷歌地图自动完成。工作得很好,我可以根据需要获得完整地址的lat和lng 然而,我想在一次点击中获得该完整地址的郊区lat lng/邮政编码。怎么用? 我的代码与的代码99%相同,只是更改了html元素ID和其他内容 <script> var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name

我目前正在使用谷歌地图自动完成。工作得很好,我可以根据需要获得完整地址的lat和lng

然而,我想在一次点击中获得该完整地址的郊区lat lng/邮政编码。怎么用? 我的代码与的代码99%相同,只是更改了html元素ID和其他内容

<script>
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'
    };

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(@Model.countryLatitude, @Model.countryLongitude),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        // create a marker
        var latlng = new google.maps.LatLng(6.9167, 79.8473);

        var input = document.getElementById('fullAddress');
        autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            map: map
        });
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            fillInAddress();
            infowindow.close();
            marker.setVisible(false);
            //input.className = '';                
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                // Inform the user that the place was not found and return.
                input.className = 'notfound';
                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(15);
            }
            marker.setIcon(({
                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)
            }));
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
        })
    }
    // [START region_fillform]
    function fillInAddress() {
        // Get the place details from the autocomplete object.            
        var place = autocomplete.getPlace();

        document.getElementById('latitude').value = place.geometry.location.lat();
        document.getElementById('longitude').value = place.geometry.location.lng();

        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]];
                document.getElementById(addressType).value = val;
            }
        }
    }
    // [END region_fillform]
    // [START region_geolocation]
    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var geolocation = new google.maps.LatLng(
                    position.coords.latitude, position.coords.longitude);
                autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
                    geolocation));
            });
        }
    }
    // [END region_geolocation]
</script>

var placeSearch,自动完成;
变量组件形式={
街道编号:“短名称”,
路线:'long_name',
地点:'long_name',
行政区域级别1:“短名称”,
国家:'long_name',
邮政编码:“短名称”
};
函数初始化(){
变量映射选项={
中心:新的google.maps.LatLng(@Model.countryLatitude,@Model.countryLongitude),
缩放:3,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map_canvas”),
地图选项);
//创建一个标记
var latlng=新的google.maps.latlng(6.9167,79.8473);
var input=document.getElementById('fullAddress');
autocomplete=newgoogle.maps.places.autocomplete(输入);
autocomplete.bindTo('bounds',map);
var infowindow=new google.maps.infowindow();
var marker=new google.maps.marker({
地图:地图
});
google.maps.event.addListener(自动完成,'place\u changed',函数(){
fillInAddress();
infowindow.close();
marker.setVisible(假);
//input.className='';
var place=autocomplete.getPlace();
如果(!place.geometry){
//通知用户未找到该位置并返回。
input.className='notfound';
返回;
}                
//如果该地点有几何图形,则将其显示在地图上。
if(place.geometry.viewport){
map.fitBounds(place.geometry.viewport);
}否则{
地图。设置中心(地点。几何。位置);
map.setZoom(15);
}
marker.setIcon(({
url:place.icon,
大小:新谷歌地图大小(71,71),
来源:新google.maps.Point(0,0),
主播:新google.maps.Point(17,34),
scaledSize:新的google.maps.Size(35,35)
}));
标记器.设置位置(位置.几何.位置);
marker.setVisible(true);
})
}
//[开始区域\填写表格]
函数fillInAddress(){
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace();
document.getElementById('latitude')。value=place.geometry.location.lat();
document.getElementById('longitude')。value=place.geometry.location.lng();
for(componentForm中的var组件){
document.getElementById(组件).value='';
//document.getElementById(组件).disabled=false;
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于(变量i=0;i
好的,我找到了一个解决方案,虽然不理想,但它很有效

一旦我从google自动完成功能中填写郊区和邮政编码字段,我需要使用以下url发出另一个请求:


有了这个,我也可以得到郊区的经度和纬度。

显示您的响应处理代码,并更好地解释您需要它做什么。我刚刚编辑了这个问题。除了完整地址的纬度和经度之外,我还需要属于完整地址的郊区的纬度和经度。您需要根据第一个请求的结果提出不同的请求,所以无法在同一个请求上获得所有信息?