如何从异步 php 数据库搜索向地理编码器发送地址

How to send address to geocoder from async php db search

我正在尝试让我的 google 地图应用程序等待来自使用 php 的数据库调用的 ajax 调用的应答。我知道我需要使用回调,但我不确定在这种情况下如何实现它们,因为地理编码器 api 也是异步的。

我试过 How to pass variables and data from PHP to JavaScript? and 的回答,但我不确定如何编辑它以适应我的情况。

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,因为 homeAddressundefined

将 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)