Карты Google: я хочу перемещать (панорамировать / наклонять) 360 улиц / изображений программно, используя события мыши (или события указателя / касания)

Question

На это Google Maps StreetView, например , я хочу программно перемещаться и наклонять изображение, используя javascript, который я вставляю в консоль браузера. Я хочу построить на телевизоре страницу, которая будет панорамировать и наклонять красивые сцены на основе некоторого ввода.

Я пробовал следующий код, но он не работает.

  var canvass = document.querySelector( 'canvas' );

  canvass.dispatchEvent( new MouseEvent( 'click', {
    pointerId:   0,
    clientX:     100,
    clientY:     390,
    offsetX:     100,
    offsetY:     390,
    screenX:     100,
    screenY:     390,
    button:      -1,
    buttons:     1,
    bubbles:     true,
    cancelable:  true,
    pointerType: "mouse",
    isPrimary:   true,
    isTrusted:   true,
    pressure:    0.5
  } ) );
  canvass.dispatchEvent( new PointerEvent( 'pointerdown', {
    pointerId:   1,
    clientX:     100,
    clientY:     390,
    offsetX:     100,
    offsetY:     390,
    screenX:     100,
    screenY:     390,
    button:      -1,
    buttons:     1,
    bubbles:     true,
    cancelable:  true,
    pointerType: "mouse",
    isPrimary:   true,
    isTrusted:   true,
    pressure:    0.5
  } ) );


  for ( i = 100; i < 400; i += 40 ) {
    var event    = new PointerEvent( 'pointermove', {
      pointerId:   0,
      clientX:     i,
      clientY:     390,
      offsetX:     i,
      offsetY:     390,
      screenX:     i,
      screenY:     390,
      layerX:      i,
      layerY:      390,
      button:      -1,
      buttons:     1,
      bubbles:     true,
      cancelable:  true,
      pointerType: "mouse",
      isPrimary:   true,
      isTrusted:   true,
      view:        window,
      pressure:    0.5
    } )
    event.layerX = i;
    event.layerY = 390;
    canvass.dispatchEvent( event );
  }

  canvass.dispatchEvent( new PointerEvent( 'pointerup', {
    pointerId:   0,
    clientX:     400,
    clientY:     390,
    offsetX:     400,
    offsetY:     390,
    screenX:     400,
    screenY:     390,
    button:      -1,
    buttons:     1,
    bubbles:     true,
    cancelable:  true,
    pointerType: "mouse",
    isPrimary:   true,
    isTrusted:   true,
    pressure:    0.5
  } ) );

Как вы можете видеть из приведенного выше кода, я попытался добавить все больше и больше свойств, но ни одно из них не сработало Firefox был полезен при указании, где в "uglified" коде Google были отправлены события. Я зарегистрировал события и сравнил истинные события мыши с событиями, которые я посылаю из кода выше. Я не вижу большой разницы. Тогда я подумал, что layerX и layerY свойства могут быть проблемой, и попытался установить их в коде выше. Однако я не смог установить их, и они не отображаются, когда я регистрирую событие.

Я в замешательстве и не могу придумать другой способ добиться этого. Помощь приветствуется.

Свойства события True Mouse

bubbles: true
button: -1
buttons: 1
cancelable: true
cancelBubble: true
clientX: 435
clientY: 343
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
explicitOriginalTarget: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
height: 1
isPrimary: true
isTrusted: true
layerX: 435
layerY: 343
ltKey: false
metaKey: false
movementX: 0
movementY: 0
mozInputSource: 1
mozPressure: 0.5
offsetX: 0
offsetY: 0
originalTarget: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
pageX: 435
pageY: 343
pointerId: 0
pointerType: "mouse"
pressure: 0.5
rangeOffset: 0
rangeParent: null
region: ""
relatedTarget: null
returnValue: true
screenX: 435
screenY: 439
shiftKey: false
srcElement: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
tangentialPressure: 0
target: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
tiltX: 0
tiltY: 0
timeStamp: 1314551
twist: 0
type: "pointermove"
view: Window https://www.google.com/maps/place/Al+Ula/@26.6600113,37.9087448,3a,75y,153.81h,4.79t

Свойства события искусственной мыши

bubbles: true
button: -1
buttons: 1
cancelable: true
cancelBubble: true
clientX: 120
clientY: 390
composed: false
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
explicitOriginalTarget: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
height: 1
isPrimary: true
isTrusted: false
layerX: 0
layerY: 0
lse
metaKey: false
movementX: 0
movementY: 0
mozInputSource: 1
mozPressure: 0.5
offsetX: 120
offsetY: 390
originalTarget: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
pageX: 120
pageY: 390
pointerId: 0
pointerType: "mouse"
pressure: 0.5
rangeOffset: 0
rangeParent: null
region: ""
relatedTarget: null
returnValue: true
screenX: 120
screenY: 390
shiftKey: false
srcElement: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
tangentialPressure: 0
target: <canvas id="" class="widget-scene-canvas" width="2880" height="822" style="width: 1440px; height: 411px;" tabindex="-1">
tiltX: 0
tiltY: 0
timeStamp: 1702460
twist: 0
type: "pointermove"
view: null
which: 0
width: 1
x: 120
y: 390

Answer 1

@ MrUpsidown продемонстрировал еще один не менее хороший подход с использованием Google Map API. Проверьте это здесь http://jsfiddle.net/jsr3z8e6/

var map;
var panorama;
var panoramaService;
var streetView;
var center = new google.maps.LatLng(26.6600113, 37.9087448);

function initialize() {

  map = new google.maps.Map(
    document.getElementById("map-canvas"), {
      zoom: 5,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  panoramaService = new google.maps.StreetViewService();

  var panoramaOptions = {
    disableDefaultUI: true
  };

  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);

  map.setStreetView(panorama);

  streetView = map.getStreetView();
  runPanoramaService();
}

function runPanoramaService() {
  panoramaService.getPanorama({
    pano: 'F:AF1QipMUgQD1VGebAWOdIlFCavG1hd76JH9QxjaIUXTl'
  }, function(streetViewPanoramaData, streetViewStatus) {

    if (streetViewStatus == "OK") {

      streetView.setPosition(streetViewPanoramaData.location.latLng);
      streetView.setVisible(true);
      spinIt();
    }
  });

}

function spinIt() {

  var pov = panorama.getPov();

  setInterval(function() {

    pov.heading += 0.1;
    pov.pitch = 20 * Math.sin(20*pov.heading/360);
    if (pov.heading > 360) {
      pov.heading -= 360;
    }

    panorama.setPov(pov);

  }, 2);
};

initialize();