Question

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

以下是具有相同结构和相同方式的示例代码：

<!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>

如Google Maps API文档所述，调用directionsRenderer.setDirections(response)会呈现路线：

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

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

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

什么会阻止渲染折线？

Answer 1

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

map

proof of concept fiddle

代码段：

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;
    }
  }

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

1 个答案: