代码之家 › 专栏 › 技术社区 › Brendan McDonnell

谷歌地图设置方向渲染器对象不绘制路线

directions google-maps-api-3 google-maps javascript

Brendan McDonnell · 技术社区 · 7 年前

尝试绘制路由时,代码运行良好,但不呈现。

下面是遵循相同结构并以相同方式执行的示例代码:

<!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 确实发生了变化。

什么可以阻止绘制管线多段线?

1 回复 | 直到 7 年前

geocodezip 7 年前

设置 map 的属性 DirectionsRenderer ,使用 .setMap 方法。您当前正在设置 地图 财产 方向渲染器 ,但没有记录。

  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

代码段:

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>