从点数据库中捕捉到最近的街道路线服务

Question

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

问题：

仅一个点被捕捉到街道上，其余所有点均不显示，地图也放大到该点。 我感觉这是因为Directions Service是异步的，但是我不确定如何解决此问题，因此它将所有点都捕捉到数据库中最近的街道。

如果我不尝试使用Directions服务并将其捕捉到街道上，则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会缩放地图以适合显示的方向，除非您将saveViewport选项设置为true。
2. 为什么需要将数据库中的所有点都捕捉到最近的道路？ 这不是定向服务的目的。 它是异步的，并受配额和速率限制的限制（请检查“状态”的值，它应说明为什么只得到一个结果）。 如果希望将数据库中每个条目的点捕捉到最近的道路，请离线捕获它们，并将它们也保存在数据库中。