例如，在这个谷歌地图街景上，我想使用粘贴在浏览器控制台上的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有助于指出谷歌"丑化"代码中事件的发送位置。我记录了这些事件，并将真实的鼠标事件与我从上面的代码中发送的事件进行了比较。我看没有太大区别。然后我认为layerX和layerY属性可能是问题所在，并尝试在上面的代码中设置它们。然而，我无法设置它们，当我记录事件时，它们也不会出现。
我被难住了，想不出其他方法来实现这一点。感谢您的帮助。
真鼠标事件属性
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
@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();