InvalidValueError: setPov в свойстве zoom: NaN не является допустимым значением, используя просмотр улиц с GoogleMutant - PullRequest
0 голосов
/ 04 мая 2018

Я делаю карту, используя Leaflet и плагин GoogleMutant. Я обнаружил проблему, которую не могу последовательно воспроизвести.

Это мой код для определения карты Leaflet и слоя GoogleMutant:

var map = L.map('map').setView([-23.553390347066472, -46.6274517774582], 18);

var roads = L.gridLayer.googleMutant({
  maxZoom: 21,
  streetViewControl: true,
  type: 'roadmap',
}).addTo(map);

А это код для добавления StreetView

var fenway = new google.maps.LatLng(getUrlParameter('lat'),getUrlParameter('lng'));

var panoEl = document.getElementById('pano');
var pano = new google.maps.StreetViewPanorama(panoEl, {
    position: fenway,
    pov: { heading: 165, pitch: 0 }
});

roads.on('spawned', function(ev) {
  var googleMap = ev.mapObject;
  googleMap.setOptions({  streetViewControl: true, fullscreenControl: false,})
  googleMap.setStreetView(pano)
});

Большую часть времени это работает, но иногда я получаю эту ошибку:

InvalidValueError: setPov in property zoom: NaN is not an accepted value

Я посмотрел документацию StreetView и GoogleMutant, но ничего не нашел.

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Я столкнулся с этой проблемой при создании прототипа приложения, в котором использовались CSS-переходы. Оказывается, что когда StreetViewPanorama вычисляет значения для используемого им увеличения; он принимает во внимание высоту и ширину элемента, чтобы выбрать лучшее разрешение, если это возможно для изображений улиц, которые кажутся ...

Проблема определенно в том, как свойство zoom вычисляется StreetViewPanorama, элемент управления получает значение Infinity, вычисленное для свойства pov.zoom, и каким-то образом или NaN передается внутренней функции.

Вы можете использовать следующий код, чтобы обойти проблему: (перезаписывает функцию и поддерживает предыдущую версию)

 //Hack, use a delay for now because of how zoom is calculated.
        const test = this.pano.setPov.bind(this.pano);
        this.pano.setPov = function () {   
            //debugger; // you can inspect this.pov.zoom here to see Infinity...
            if (this.j) context.clearTimeout(this.j); //this may need to be changed per the version of google maps your using.
            const args = { zoom: arguments[0].zoom | 0 || 1, heading: arguments[0].heading | 0 || 0, pitch: arguments[0].pitch || 0 };
            if (false == isFinite(args.zoom) || args.zoom === 0) args.zoom = 1;
            if (false == isFinite(args.pitch)) args.pitch = 0;
            if (false == isFinite(args.heading)) args.heading = 0;
            setTimeout(function () { test(args); }, 100);   //Fix is here             
        };

Google действительно должен улучшить setPov класса StreetViewPanorama, чтобы гарантировать, что необходимые параметры переданы и что они имеют разумные значения, а не выдавать ошибку IMHO.

0 голосов
/ 04 мая 2018

Я не могу взглянуть на (закрытый) исходный код для GMaps, поэтому могу только догадаться , что проблема может быть в том, что где-то отсутствует свойство zoom.

Одна возможность - google.maps.StreetViewPanoramaOptions - там есть свойство zoom. Так что вместо

var pano = new google.maps.StreetViewPanorama(panoEl, {
  position: fenway,
  pov: { heading: 165, pitch: 0 }
});

Я бы попробовал что-то вроде

var pano = new google.maps.StreetViewPanorama(panoEl, {
  position: fenway,
  pov: { heading: 165, pitch: 0 },
  zoom: 0
});

Другая возможность состоит в том, что между гонкой GoogleMutant и изменением уровня масштабирования существует условие гонки.

Если вы прочитаете код для GoogleMutant, вы увидите, что событие spawned происходит, когда мутант создается , но задолго до его уровень масштабирования установлен . Есть нетривиальная последовательность событий, происходящих, когда мутант добавляется на карту.

Поэтому, чтобы убедиться, что уровень масштабирования мутанта инициализирован перед показом панорамы, я бы изменил ...

roads.on('spawned', function(ev) {
  var googleMap = ev.mapObject;
  googleMap.setOptions({  streetViewControl: true, fullscreenControl: false,})
  googleMap.setStreetView(pano)
});

... во что-то вроде ...

roads.once('spawned', function(ev) {
  roads.once('loading', function(ev) {
    var googleMap = ev.mapObject;
    googleMap.setOptions({  streetViewControl: true, fullscreenControl: false,})
    googleMap.setStreetView(pano)
  });
});

В этом случае другой возможностью будет запускать другое настраиваемое событие в строке 79 GoogleMurant.js - возможно, что-то вроде this.fire('ready')

...