Javascript Google Maps设置方向渲染器对象的方向不绘制路线_Javascript_Google Maps_Google Maps Api 3_Directions

Javascript Google Maps设置方向渲染器对象的方向不绘制路线

javascript google-maps google-maps-api-3

Javascript Google Maps设置方向渲染器对象的方向不绘制路线,javascript,google-maps,google-maps-api-3,directions,Javascript,Google Maps,Google Maps Api 3,Directions,尝试绘制管线时，代码运行良好，但不会渲染下面是一个遵循相同结构和行为方式的示例代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple markers</title> <

尝试绘制管线时，代码运行良好，但不会渲染

下面是一个遵循相同结构和行为方式的示例代码：

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


简单标记
#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
var routeDisplay=新函数（）{
var self=这个；
//变数
自我指导服务；
自我导向；
自我地图；
自我起源；
自我目的地；
//功能
self.setup=函数（）{
self.directionsService=新的google.maps.directionsService（）；
self.directionsrender=新的google.maps.directionsrender({
对,，
真的吗
});
}
self.setMap=函数（map）{
self.map=map；
self.directionsRenderer.map=map；
}
self.setPoints=功能（起点、终点）{
自我起源=起源；
self.destination=目的地；
}
self.render=函数（）{
如果（self.directionsrender.map==null）self.directionsrender.map=self.map；
self.directionservice.route({
起源：自我起源，
目的地：self.destination，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
self.directionsRenderer.setDirections（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
self.hide=function（）{
self.directionsRenderer.map=null；
}
self.show=函数（）{
self.directionsRenderer.map=self.map；
}
self.toggleShow=函数（）{
self.directionsrender.map=（self.directionsrender.map==null）？
self.map：空；
}
self.isalreadyrended=函数（起点、终点）{
if（origin==self.origin&&destination==self.destination）返回true；
返回false；
}
}
函数initMap（）{
var mylatng={
纬度：45.5325016，
液化天然气：-122.7973512
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：myLatLng
});
var start=new google.maps.Marker({
职位：myLatLng，
地图：地图，
标签：“开始”
});
var end=new google.maps.Marker({
职位：{
纬度：myLatLng.lat-.5，
液化天然气：myLatLng.lng-.5
},
地图：地图，
标签：“结束”
});
//设置routeDisplay
routeDisplay.setup（）；
routeDisplay.setMap（map）；
start.addListener（'单击'，函数（））{
var a=起始位置；
var b=结束位置；
如果（routeDisplay.isalreadyrended（a，b））routeDisplay.toggleShow（）；
否则{
线路显示设置点（a、b）；
routeDisplay.render（）；
}
});
}

调用

directionsrender.setDirections（response）

应该呈现路线，正如Google Maps API文档所述：

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

这种精确的策略通常可以正常工作，但在这种情况下，我的

self.render

函数是我用来处理所有路径渲染的对象内部的函数

还需要注意的是，我已经确认

directionsrender

使用的贴图是正确的贴图，并且

directionRenderer.directions

确实会发生变化（应该如此）

什么可能会阻止渲染管线多段线？

要设置

方向渲染器的映射
属性，请使用.setMap
方法。您当前正在设置directionsrender
的map
属性，该属性没有文档记录
  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;
    }
  }



代码片段：

html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

var routeDisplay=新函数（）{
var self=这个；
//变数
自我指导服务；
自我导向；
自我地图；
自我起源；
自我目的地；
//功能
self.setup=函数（）{
self.directionsService=新的google.maps.directionsService（）；
self.directionsrender=新的google.maps.directionsrender({
对,，
真的吗
});
}
self.setMap=函数（map）{
self.map=map；
self.directionsRenderer.setMap（map）；
}
self.setPoints=功能（起点、终点）{
自我起源=起源；
self.destination=目的地；
}
self.render=函数（）{
if（self.directionsRenderer.getMap（）==null）
self.directionsRenderer.setMap（self.map）；
self.directionservice.route({
起源：自我起源，
目的地：self.destination，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
self.directionsRenderer.setDirections（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
self.hide=function（）{
self.directionsRenderer.setMap（null）；
}
self.show=函数（）{
self.directionsRenderer.setMap（self.map）；
}
self.toggleShow=函数（）{
self.directionsRenderer.map=（self.directionsRenderer.getMap（）==null）？
self.map：空；
}
self.isalreadyrended=函数（起点、终点）{
if（origin==self.origin&&destination==self.destination）返回true；
ret