从点数据库捕捉到最近的街道方向服务

Question

我有一个包含经度、纬度的点的 MYSQL 数据库，我正在读取数据库并为 javascript Google API 方向服务生成 XML，以将这些点捕捉到最近的街道上。这是从将起点和终点设置为自身。

问题：

只有一个点被捕捉到街道上，其余的根本不显示，地图也放大了这个点。我有一种感觉，这是因为方向服务是异步的，但我不确定如何纠正这个问题，所以它会将所有点捕捉到数据库中最近的街道。

如果我不尝试使用路线服务并将它们捕捉到街道上，则 db 代码会工作并显示所有点

Javascript 源代码：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>PHP GOOGLE MAPS POINTS</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[



var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

    function load() {

      directionsDisplay = new google.maps.DirectionsRenderer();

      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(40.06761, -79.9022),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      directionsDisplay.setMap(map);


      // read in Long, lat from MYSQL DB from PHP file generated XML
      downloadUrl("phpmap.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

          var request = {
          origin:point,
          destination:point,
          travelMode: google.maps.TravelMode.DRIVING
          };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });

           //






        }
      });


    }



    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>
  </script>
  </head>

 <body onload="load()">
<div style="width: 600px; height: 600px;" id="map"></div>
</body>
</html>

Answer 1

1. directionsRenderer 将缩放地图以适应显示的方向，除非您将 preserveViewport 选项设置为 true。
2. 为什么需要将数据库中的所有点都捕捉到最近的道路？这不是路线服务的目的。它是异步的，受配额和速率限制（检查“状态”的值，它应该解释为什么你只得到一个结果）。如果您希望数据库中每个条目的点都捕捉到最近的道路，请离线捕获它们并将它们也保存在您的数据库中。