个人中心
gpt4 book ai didi

javascript - 谷歌地图设置 DirectionsRenderer 对象的方向不绘制路线

转载 作者：行者123 更新时间：2023-12-03 01:28:49 25 4
gpt4 key购买 nike

尝试绘制路线时，代码运行正常，但不渲染。

下面是一个示例代码，其结构和行为方式相同:

<!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 文档所述:

Call setDirections() on the renderer, passing it the DirectionsResult as noted above. Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.

这种确切的策略通常工作得很好，但在这种情况下，我的 self.render 函数是我用来处理所有路由渲染的对象内部的函数。

还应该注意的是，我已经确认 directionsRenderer 使用的 map 是正确的 map ，并且 directionRenderer.directions 确实发生了变化(正如它应该发生的那样)。

什么可能会阻止路线折线的渲染？

最佳答案

要设置 DirectionsRenderer 的 map 属性，请使用 .setMap 方法。您当前正在设置 DirectionsRenderer 的 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;
    }
  }

proof of concept fiddle

screenshot of resulting map

代码片段:

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

关于javascript - 谷歌地图设置 DirectionsRenderer 对象的方向不绘制路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51386741/

25 4 0
文章推荐： javascript - 遇到node.js TypeError : First argument must be a string or Buffer with the simplest possible script
文章推荐： javascript - 如何将 scorm 类(class)集成到我的网站
文章推荐： javascript - Ionic Service Worker 发送 GET 选项
文章推荐： javascript - D3 JS : Create a page index. html 运行js项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com