javascript - Google Maps设置directionsRenderer对象未绘制路线的方向

尝试绘制路线时，代码可以正常运行，但无法渲染。

这是遵循相同结构并以相同方式运行的示例代码：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Simple markers</title>
  <style>
    #map {
      height: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var routeDisplay = new function() {
      var self = this;
      // Variables
      self.directionsService;
      self.directionsRenderer;
      self.map;
      self.origin;
      self.destination;

      // Functions
      self.setup = function() {
        self.directionsService = new google.maps.DirectionsService();
        self.directionsRenderer = new google.maps.DirectionsRenderer({
          preserveViewport: true,
          suppressMarkers: true
        });
      }

      self.setMap = function(map) {
        self.map = map;
        self.directionsRenderer.map = map;
      }

      self.setPoints = function(origin, destination) {
        self.origin = origin;
        self.destination = destination;
      }

      self.render = function() {
        if (self.directionsRenderer.map == null) self.directionsRenderer.map = self.map;
        self.directionsService.route({
          origin: self.origin,
          destination: self.destination,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            self.directionsRenderer.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }

      self.hide = function() {
        self.directionsRenderer.map = null;
      }

      self.show = function() {
        self.directionsRenderer.map = self.map;
      }

      self.toggleShow = function() {
        self.directionsRenderer.map = (self.directionsRenderer.map == null) ?
          self.map : null;
      }

      self.isAlreadyRendered = function(origin, destination) {
        if (origin == self.origin && destination == self.destination) return true;
        return false;
      }
    }

    function initMap() {
      var myLatLng = {
        lat: 45.5325016,
        lng: -122.7973512
      };

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: myLatLng
      });

      var start = new google.maps.Marker({
        position: myLatLng,
        map: map,
        label: 'start'
      });

      var end = new google.maps.Marker({
        position: {
          lat: myLatLng.lat - .5,
          lng: myLatLng.lng - .5
        },
        map: map,
        label: 'end'
      });

      // Set up routeDisplay
      routeDisplay.setup();
      routeDisplay.setMap(map);

      start.addListener('click', function() {
        var a = start.position;
        var b = end.position;
        if (routeDisplay.isAlreadyRendered(a, b)) routeDisplay.toggleShow();
        else {
          routeDisplay.setPoints(a, b);
          routeDisplay.render();
        }
      });
    }
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
  </script>
</body>

</html>

调用directionsRenderer.setDirections(response)应该会显示路线，如Google Maps API文档所述：

在渲染器上调用setDirections（），并向其传递DirectionsResult，如上所述。由于渲染器是MVCObject，因此它将自动检测对其属性的任何更改，并在其关联方向更改后更新地图。

这种精确的策略通常可以正常工作，但是在这种情况下，我的self.render函数是我用来处理所有路径渲染的对象内部的函数。

还应该注意，我已经确认directionsRenderer使用的地图是正确的地图，并且directionRenderer.directions确实发生了变化（应该如此）。

什么会阻止渲染折线？

最佳答案

若要设置map的DirectionsRenderer属性，请使用.setMap方法。当前正在设置map的DirectionsRenderer属性，该属性未记录。

  var routeDisplay = new function() {
    var self = this;
    // Variables
    self.directionsService;
    self.directionsRenderer;
    self.map;
    self.origin;
    self.destination;

    // Functions
    self.setup = function() {
      self.directionsService = new google.maps.DirectionsService();
      self.directionsRenderer = new google.maps.DirectionsRenderer({
        preserveViewport: true,
        suppressMarkers: true
      });
    }

    self.setMap = function(map) {
      self.map = map;
      self.directionsRenderer.setMap(map);
    }

    self.setPoints = function(origin, destination) {
      self.origin = origin;
      self.destination = destination;
    }

    self.render = function() {
      if (self.directionsRenderer.getMap() == null)
        self.directionsRenderer.setMap(self.map);

      self.directionsService.route({
        origin: self.origin,
        destination: self.destination,
        travelMode: 'DRIVING'
      }, function(response, status) {
        if (status === 'OK') {
          self.directionsRenderer.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }

    self.hide = function() {
      self.directionsRenderer.setMap(null);
    }

    self.show = function() {
      self.directionsRenderer.setMap(self.map);
    }

    self.toggleShow = function() {
      self.directionsRenderer.map = (self.directionsRenderer.getMap() == null) ?
        self.map : null;
    }

    self.isAlreadyRendered = function(origin, destination) {
      if (origin == self.origin && destination == self.destination) return true;
      return false;
    }
  }

proof of concept fiddle

javascript - Google Maps设置directionsRenderer对象未绘制路线的方向-LMLPHP

代码段：

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>
<script>
  var routeDisplay = new function() {
    var self = this;
    // Variables
    self.directionsService;
    self.directionsRenderer;
    self.map;
    self.origin;
    self.destination;

    // Functions
    self.setup = function() {
      self.directionsService = new google.maps.DirectionsService();
      self.directionsRenderer = new google.maps.DirectionsRenderer({
        preserveViewport: true,
        suppressMarkers: true
      });
    }

    self.setMap = function(map) {
      self.map = map;
      self.directionsRenderer.setMap(map);
    }

    self.setPoints = function(origin, destination) {
      self.origin = origin;
      self.destination = destination;
    }

    self.render = function() {
      if (self.directionsRenderer.getMap() == null)
        self.directionsRenderer.setMap(self.map);

      self.directionsService.route({
        origin: self.origin,
        destination: self.destination,
        travelMode: 'DRIVING'
      }, function(response, status) {
        if (status === 'OK') {
          self.directionsRenderer.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }

    self.hide = function() {
      self.directionsRenderer.setMap(null);
    }

    self.show = function() {
      self.directionsRenderer.setMap(self.map);
    }

    self.toggleShow = function() {
      self.directionsRenderer.map = (self.directionsRenderer.getMap() == null) ?
        self.map : null;
    }

    self.isAlreadyRendered = function(origin, destination) {
      if (origin == self.origin && destination == self.destination) return true;
      return false;
    }
  }

  function initMap() {
    var myLatLng = {
      lat: 45.5325016,
      lng: -122.7973512
    };

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: myLatLng
    });

    var start = new google.maps.Marker({
      position: myLatLng,
      map: map,
      label: 'start'
    });

    var end = new google.maps.Marker({
      position: {
        lat: myLatLng.lat - .5,
        lng: myLatLng.lng - .5
      },
      map: map,
      label: 'end'
    });

    // Set up routeDisplay
    routeDisplay.setup();
    routeDisplay.setMap(map);

    start.addListener('click', function() {
      var a = start.position;
      var b = end.position;
      if (routeDisplay.isAlreadyRendered(a, b)) routeDisplay.toggleShow();
      else {
        routeDisplay.setPoints(a, b);
        routeDisplay.render();
      }
    });
  }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

关于javascript - Google Maps设置directionsRenderer对象未绘制路线的方向，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51386741/