Javascript 如何获取地理位置并在地图上显示

我一直在尝试从文本框中获取位置地址，然后从地址中获取纬度和经度，并从地址中显示最近的火车站

我可以得到地址的纬度和经度 我还可以显示从特定纬度和经度最近的火车站

我的问题是，当我试图从地址中获取纬度和经度，并将地址的纬度和经度显示为最近的火车站时，我失败了

请在下面找到我的代码（问题在警报中-）-

---

问题是

geocoder.geocode

异步运行，在调用回调之前，您将无法访问结果，因此您应该在回调中调用以下内容（nearbySearch）

另一个问题：目前，如果不创建新地图，您将无法再次进行地理编码/搜索（当然，您可能总是通过再次调用

initialize

来创建新地图，但这将导致性能不佳，并且还会增加地图负载…这是有限的）

将地图创建与地理编码/搜索分离的解决方案（将地址字段包装到表单中，提交表单时将调用地理编码/搜索）

函数初始化（）{
“严格使用”；
var map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：新google.maps.LatLng（-37.8176108145.0422631），
缩放：1
}),
field=document.getElementById（'address'），
form=field.form，
marker=新的google.maps.marker（），
info=新建google.maps.InfoWindow（），
//稍后我将使用此对象隐藏以前添加的标记
mvc=new google.maps.MVCObject（），
geocoder=新的google.maps.geocoder（），
服务=新的google.maps.places.PlacesService（地图）；
//如果需要，请将该字段用作控件
控件[google.maps.ControlPosition.TOP\u CENTER].push（表单）；
google.maps.event.addListener（标记'click'，函数（）{
google.maps.event.trigger（信息，'open'，this）；
});
//这将打开单击标记的信息窗口
//将从中检索infowindow内容
//标记的内容属性
google.maps.event.addListener（信息，“打开”，函数（标记）{
this.setContent（marker.get（'content'））；
打开（marker.getMap（），marker）；
});
marker.bindTo（'map'，mvc'，map'）；
//这将地理编码/地点搜索与地图创建分离
//将在提交表格时执行
//（例如，在地址字段中按ENTER键）
google.maps.event.addDomListener（表单'submit'，函数（e）{
如果（e）e.preventDefault（）；
//这将隐藏所有标记和信息窗口
mvc.set（'map'，null）；
if（field.value.match（/\S+/））{
地理编码({
“地址”：field.value
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
mvc.set（'map'，map）；
如果（结果[0]。几何体。视口）{
map.fitBounds（结果[0].geometry.viewport）；
}否则{
map.setCenter（结果[0].geometry.location）；
}
marker.setvalue({
位置：结果[0]。geometry.location，
内容：结果[0]。格式化的\u地址
});
服务，近距离搜索({
位置：结果[0]。geometry.location，
半径：1000，
类型：[“火车站”、“公交站”、“地铁站”、“公交站”]
}，功能（位置、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
//稍后将用于设置视口
//这样它就包含了所有的标记
var b=新的google.maps.LatLngBounds（）；
地点。forEach（功能（地点，i）{
var m=新的google.maps.Marker({
位置：place.geometry.location，
图标：'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
内容：place.name
});
b、 延伸（位置、几何、位置）；
m、 bindTo（'map'，mvc，'map'）；
google.maps.event.addListener（m，'map_changed'，function（）{
如果（！this.getMap（））this.unbindAll（）；
});
google.maps.event.addListener（m，'click'，function（）{
google.maps.event.trigger（信息，'open'，this）；
});
});
如果（places.length>1）{
地图2（b）；
}
}否则{
警报（'NearbySearch因以下原因未成功：'+状态）；
}
});
}否则{
警报（'地理编码未成功，原因如下：'+状态）；
}
});
}
返回false；
});
//触发表单提交以进行初始搜索
google.maps.event.trigger（格式为“提交”）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
保证金：0；
填充：0；
}
#地址{
宽度：300px；
}


function initialize() {

        // start
        var latitude;
        var longitude;
        geocoder = new google.maps.Geocoder();
        var address = document.getElementById('address').value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                latitude = results[0].geometry.location.lat();
                longitude = results[0].geometry.location.lng();
                alert(longitude);

            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });

        alert(longitude);

        var pyrmont = new google.maps.LatLng(-37.8176108, 145.0422631);

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: pyrmont,
            zoom: 15
        });

        var request = {
            location: pyrmont,
            radius: 1000,
            types: ['train_station', 'bus_station', 'subway_station',   'transit_station']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);  

    }