google-maps - google api使用数据库中的纬度，经度搜索附近的地址

Question

我需要使用它们的纬度、经度值从谷歌 api 检索一组附近的地址。纬度、经度值是从数据库中检索的。有没有办法做到这一点？

Answer 1

使用谷歌地图 Javascript API。 https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

并阅读开发者指南https://developers.google.com/maps/documentation/javascript/tutorial

Answer 2

以下是结合使用 jquery 和 google api 的方法。$.getJSON 调用正在调用一项服务，该服务以非常标准的名称和地址格式获取 lat/lng 对象列表，并将所有内容推送到标记数组中。

在这个例子中，用户在“useradd”控件中输入了一个地址，该地址变成了一个蓝色标记，并且数据库中一些附近的东西显示为红色标记。

我发现地图对样式变化非常敏感，尤其是修改它的高度和宽度，我相信有一些方法可以解决这个问题，只是还没有找到。

 <script type="text/javascript">

    var geocoder;
    var map;
    var markersArray = [];

    //---------------------------------------------------------------------------------------------------------------

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(0, 0);  //add some real starting coords
        var mapOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        $('#loadMsg').hide().ajaxStart(function () { $(this).show(); }).ajaxStop(function () { $(this).hide(); });
    }

    //---------------------------------------------------------------------------------------------------------------

    function getStringfromJSON(invalue) {
        if (!invalue) { return ''; } else { return invalue; }
    }

    function codeAddress() {
        var address = document.getElementById("useradd").value;
        if (address.length == 0) return;

        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }

        geocoder.geocode
        (
            { 'address': address },
            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var blueIcon = new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png");
                    var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, icon: blueIcon, clickable: false });
                    marker.setTitle(address);

                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();
                    var dist = document.getElementById("selMiles").value;

                    var pageurl = '../Search/GetNearbys?lat=' + lat + '&lng=' + lng + '&dist=' + dist;
                    $.getJSON(pageurl,
                                function (data) {
                                    for (var x = 0; x < data.length; x++) {
                                        var facid = data[x].ID;
                                        var facname = getStringfromJSON(data[x].Name);
                                        var streetaddress = getStringfromJSON(data[x].StreetAddress);
                                        var address2 = getStringfromJSON(data[x].Address2);
                                        var city = getStringfromJSON(data[x].City);
                                        var state = getStringfromJSON(data[x].State);
                                        var zip = getStringfromJSON(data[x].ZipCode);
                                        var xlat = data[x].Latitude;
                                        var xlng = data[x].Longitude;
                                        var xlatlng = new google.maps.LatLng(xlat, xlng);
                                        var xmarker = new google.maps.Marker({ map: map, position: xlatlng, facilityid: facid });
                                        xmarker.setTitle(facname + ' ' + streetaddress + ' ' + address2 + ' ' + city + ',' + state + ' ' + zip);
                                        markersArray.push(xmarker);

                                        google.maps.event.addListener(xmarker, 'click',
                                            function () {
                                                window.open('../Profile?id=' + this.facilityid, '_blank');
                                            });
                                    }
                                },
                                function (succeess) { }
                            );
                }
                else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
                markersArray.push(marker);  //put it here so it gets reset after each search
            }
       );
    }

</script>