Как отключить масштабирование карты после рендеринга проезда? - PullRequest
0 голосов
/ 19 сентября 2019

Как говорит заголовок - я хочу избежать масштабирования карты после рендеринга направлений.Я нашел здесь много об этом, например Не меняйте центр карты или масштаб при рендеринге направлений , но после добавления {preserveViewport: true} в DirectionsRenderer ничего не происходит.Я не хочу вычислять объединение границ ответов направлений, а только «зависать» при отображении направлений.Что я делаю не так?

Моя карта: https://jsfiddle.net/harlowpl/xawy71r0/33/

              infoWindow = new google.maps.InfoWindow();
              directionsService = new google.maps.DirectionsService();
              directionsDisplay = new google.maps.DirectionsRenderer({
              map: map,
              preserveViewport: true,
              markerOptions: {
              visible: false
              }
              });

              createSourceMarker();
              createDestinationMarkers();
              }

              function markerClicked(destinationLocation) {
              var directionsRequest = {
              origin: sourceLocation,
              destination: destinationLocation,
              travelMode: 'DRIVING'
              };

              directionsService.route(directionsRequest, handleDirectionResults);
              }

              function handleDirectionResults(result, status) {
              if (status === 'OK') {
              directionsDisplay.setDirections(result);
              } else {
              console.log(status);
              }
              }
              }
              });

1 Ответ

0 голосов
/ 19 сентября 2019

Уровень масштабирования установлен на нецелое значение.При отображении результата направления оно меняется на целочисленное значение.

Скрытое в документации, оно говорит: Укажите уровень масштабирования в виде целого числа .

подтверждение концепции скрипта (настройка увеличения на 16, а не на 15,5)

фрагмент кода:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
<div id="map"></div>
<script>
  var sourceLocation = {
    lat: 52.340822,
    lng: 16.855841
  };
  var destinationLocations = [{
      lat: 52.344583,
      lng: 16.849864
    },
    {
      lat: 52.343319,
      lng: 16.855080
    },

  ];
  var directionsService;
  var directionsDisplay;
  var infoWindow;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 52.343580,
        lng: 16.857495
      },
      zoom: 16,
      styles: [{
        "featureType": "poi",
        "elementType": "all",
        "stylers": [{
          "visibility": "off"
        }]
      }],
      gestureHandling: 'cooperative'
    });
    // console.log("zoom=" + map.getZoom());
    // console.log("zoom=" + map.getZoom()+" bounds="+map.getBounds().toUrlValue());
    google.maps.event.addListener(map, 'zoom_changed', function() {
      console.log("zoom=" + map.getZoom());
    });
    google.maps.event.addListener(map, 'bounds_changed', function() {
      console.log("zoom=" + map.getZoom() + " bounds=" + map.getBounds().toUrlValue());
    });
    infoWindow = new google.maps.InfoWindow();
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map,
      preserveViewport: true,
      markerOptions: {
        visible: false
      }
    });

    createSourceMarker();
    createDestinationMarkers();
  }

  function markerClicked(destinationLocation) {
    var directionsRequest = {
      origin: sourceLocation,
      destination: destinationLocation,
      travelMode: 'DRIVING'
    };

    directionsService.route(directionsRequest, handleDirectionResults);
  }

  function handleDirectionResults(result, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(result);
    } else {
      console.log(status);
    }
  }


  function createSourceMarker() {
    new google.maps.Marker({
      position: sourceLocation,
      map: map,
      icon: 'http://nakujawskiej.pl/nk/wp-content/uploads/mapMarkers/marker-main.svg'
    });
  }

  var opis = [

    '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<center><h4 id="firstHeading" class="firstHeading">Apteka</h4></center>' + '<hr>' +
    '<div id="bodyContent">' +
    '<p><b>Odległość :</b>' + '  750m' + '<br>' + '<b>Czas dojazdu :</b>' + '  2 min</p>' +
    '</div>' +
    '</div>',

    '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h4 id="firstHeading" class="firstHeading">Przedszkole</h4>' + '<hr>' +
    '<div id="bodyContent">' +
    '<p><b>Odległość :</b>' + '  450m' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  2 min</p>' +
    '</div>' +
    '</div>',
  ];

  var opisIndex = 0;

  var iconBase = 'http://nakujawskiej.pl/nk/wp-content/uploads/mapMarkers/';
  var markers = [
    iconBase + 'marker-01.svg',
    iconBase + 'marker-02.svg'
  ];

  var markersIndex = 0;

  function createDestinationMarkers() {
    destinationLocations.forEach(function(location, index) {
      var opisIndex = markersIndex;
      var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: markers[markersIndex++ % markers.length],
      });

      marker.addListener('click', function() {
        infoWindow.setContent(opis[opisIndex % opis.length]);
        infoWindow.open(map, marker);
      });
      marker.addListener('click', function() {
        markerClicked(location);
      });
    })

  }
  // google.maps.event.addDomListener(window, "load", initMap);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo5rkrpNDFQnr5Afq9fKGmGjOTPC0C390&callback=initMap" async defer></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...