动态更改Google地图街景位置 [英] Change google maps street view position dynamically
问题描述
我使用的是Google Maps街景视图，因此我需要在位置上更改全景图，其方式与创建时相同.我正在尝试使用 google.maps.StreetViewPanorama 实例的 setPosition({lat:-34，lng:151})方法执行此操作，但这没有用.我创建了小提琴，基本上是Google地图街景并排小提琴的副本，唯一的区别是我尝试在2秒后更改位置:
I'm using google maps street view, and i need to change panorama locationally, in the same way as when it's created. I'm trying to do it with setPosition({lat: -34, lng: 151}) method of google.maps.StreetViewPanorama instance, but that didn't work. I created fiddle, which is basically a copy of the google maps Street View Side-By-Side fiddle, with the only difference that I try to change location after 2 seconds: https://jsfiddle.net/corecode1/zf0jsL7g/ .
我做错什么了吗?还是可能需要在Google云控制台中进行一些其他设置?任何帮助将不胜感激.
Am I doing something wrong? Or maybe it requires some additional setup in google cloud console? Any help would be appreciated.
代码段(来自小提琴):
"use strict";
function initialize() {
const fenway = {
lat: 42.345573,
lng: -71.098326
};
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{
position: fenway,
pov: {
heading: 34,
pitch: 10
}
}
);
map.setStreetView(panorama);
setTimeout(() => {
const newPosition = new google.maps.LatLng({lat: -34, lng: 151});
panorama.setPosition({lat: -34, lng: 151});
}, 2000);
}html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}<!DOCTYPE html>
<html>
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly"
defer
></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
</body>
</html>推荐答案
新位置返回的状态为"ZERO_RESULTS".如果您使用(-34.002223，150.994098)代替，则可以使用.
The new location is returning a status of "ZERO_RESULTS".
If you use (-34.002223, 150.994098) instead it works.
一旦失败，它似乎就无法工作.
Once it has failed, it seems not to work.
这有效(如果您不首先加载失败的位置):
This works (if you don't load the failed location first):
setTimeout(() => {
const newPosition = new google.maps.LatLng({lat: -34.002223, lng: 150.994098});
panorama.setPosition(newPosition);
map.setCenter(newPosition);
}, 4000);
代码段:
"use strict";
function initialize() {
const fenway = {
lat: 42.345573,
lng: -71.098326
};
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
}
);
map.setStreetView(panorama);
google.maps.event.addListenerOnce(panorama, 'position_changed', function() {
console.log(panorama.getPosition().toUrlValue(6));
})
google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
console.log(panorama.getStatus());
})
setTimeout(() => {
const newPosition = new google.maps.LatLng({
lat: -34,
lng: 151
});
panorama.setPosition(newPosition);
map.setCenter(newPosition);
}, 6000);
setTimeout(() => {
const newPosition = new google.maps.LatLng({
lat: -34.002223,
lng: 150.994098
});
panorama.setPosition(newPosition);
map.setCenter(newPosition);
}, 4000);
setTimeout(() => {
const newPosition = new google.maps.LatLng({
lat: -34.002223,
lng: 150.994098
});
panorama.setPosition(newPosition);
map.setCenter(newPosition);
}, 8000);
}html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}<!DOCTYPE html>
<html>
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
</body>
</html>这篇关于动态更改Google地图街景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
