如何从异步PHP数据库搜索向Geocoder发送地址

Question

我试图让我的谷歌地图应用程序等待使用db调用从ajax调用的答案。 我知道我需要使用回调，但是由于geocoder api也是异步的，因此我不确定在这种情况下如何实现回调。

我尝试了如何将变量和数据从PHP传递到JavaScript的答案？ 以及通过XMLHttpRequest从PHP使用Java中的gettext与Javascript，但是我不确定如何对其进行编辑以适合我的情况。

db.php

$mysqli = new mysqli("host", "user", "pass", "db");
(perform query)...
echo json_encode($result_assoc_array);

location.php

<html>
(html boilerplate)...
<body>
<div id="map"></div>
<script>
var map;
var homeAddress;

var oReq = new XMLHttpRequest();
oReq.onload = function() {
    homeAddress = JSON.parse(this.responseText).address; //main field I want is address
};
oReq.open("get", "db.php", true);

oReq.send();

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 15,
    });

    var bounds = new google.maps.LatLngBounds();
    var geocoder = new google.maps.Geocoder();
    var markers = [];

    geocoder.geocode({
        'address': JSON.stringify(homeAddress)
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            bounds.extend(marker.position);
            markers.push(marker);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
 (more logic)
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap&libraries=geometry" async defer></script>
</body>
</html>

这应该给我一个地图，其标记的中心位于db的地址上，但Geocode was not successful for the following reason: INVALID_REQUEST我得到Geocode was not successful for the following reason: INVALID_REQUEST因为homeAddress undefined 。

Answer 1

将ajax请求放入initMap ，如果地址可用，则在其回调函数中调用地址解析器：

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 15,
    });

    var bounds = new google.maps.LatLngBounds();
    var geocoder = new google.maps.Geocoder();
    var markers = [];

    var oReq = new XMLHttpRequest();
    oReq.onload = function() {
      homeAddress = JSON.parse(this.responseText).address; //main field I want is address
      geocoder.geocode({
        'address': JSON.stringify(homeAddress)
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          console.log(results);
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          bounds.extend(marker.position);
          markers.push(marker);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    };
    oReq.open("get", "db.php", true);

    oReq.send();    
 (more logic)