我正在尝试使用 Ionic2 构建一个应用程序，该应用程序允许用户通过 Google Street View Static API加载StreetViewPanorama对象。加载视图后，用户应该能够以他们选择的任何方式操作街景（远离原始位置、缩放等）。完成此任务后，用户将捕获最终街景的静态图像。
当我尝试拍摄新街景位置的照片时，我遇到了困难。我正在尝试使用 Google关于静态图像生成的文档来实现这一点。不幸的是，在创建对象后，我无法引用全景对象的属性。我对 Javascript 比较陌生，所以请耐心等待。
为了生成街景全景图，我运行以下函数（从底部开始initMap()）：
/**
* Creates the map options for panorama generation. This includes adjusting the coordinate
* position of a user to the nearest available street view. Following creation of the settings,
* it generates the street view on a user's device.
*
* @param userLocation a JSON object whose keys are 'lat' and 'lng' and whose values are
* the corresponding latitude and longitude respectively
*/
generatePanorama(userLocation): void {
var streetviewService = new google.maps.StreetViewService;
streetviewService.getPanorama({
location: userLocation,
preference: google.maps.StreetViewPreference.NEAREST,
radius: 100},
function(result, status) {
console.log("Adjusted latitude: ", result.location.latLng.lat(),
"\nAdjusted longitude: ", result.location.latLng.lng());
new google.maps.StreetViewPanorama(document.getElementById('street-view'), {
position: result.location.latLng,
pov: {heading: 165, pitch: 0},
zoom: 1
});
});
}
/**
* Uses a device's native geolocation capabilities to get the user's current position
*
* @return a JSON object whose keys are 'lat' and 'lng' and whose calues are the corresponding
* latitude and longitude respectively
*/
getLocation(callback): void {
Geolocation.getCurrentPosition().then((position) => {
console.log("Latitude: ", position.coords.latitude, "\nLongitude: ", position.coords.longitude);
callback({lat: position.coords.latitude, lng: position.coords.longitude});
}).catch((error) => {
console.log('Error getting location', error);
});
}
/**
* Initialize a Google Street View Panorama image
*/
initMap(): void {
this.getLocation(this.generatePanorama);
}
如上所示，我正在使用代码创建全景图，
new google.maps.StreetViewPanorama(document.getElementById('street-view'), {
position: result.location.latLng,
pov: {heading: 165, pitch: 0},
zoom: 1
});
我无法将此对象分配给实例变量以用于以下两个函数：
/**
* Generates a URL to query the Google Maps API for a static image of a location
*
* @param lat the latitude of the static image to query
* @param lng the longitude of the static image to query
* @param heading indicates the compass heading of the camera
* @param pitch specifies the up or down angle of the camera relative to the street
* @return a string that is the URL of a statically generated image of a location
*/
generateStaticMapsURL(lat, lng, heading, pitch): string {
var url = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=";
url += lat + "," + lng;
url += "&heading=" + heading;
url += "&pitch=" + pitch;
url += "&key=SECRET_KEY";
return url;
}
openShareModal() {
console.log("Final Latitude: ", this.panorama.getPosition().lat());
console.log("Final Longitude: ", this.panorama.getPosition().lng());
console.log("Final Heading:", this.panorama.getPov().heading);
console.log("Final Heading:", this.panorama.getPov().pitch);
let myModal = this.modalCtrl.create(ShareModalPage);
myModal.present();
}
当我尝试直接或通过辅助函数将对象分配给实例变量时，我得到一个UnhandledPromiseRejectionWarning并且没有任何效果。那么，在街景对象创建后，如何准确地从街景对象中提取位置、航向和间距等内容呢？
谢谢您的帮助！
更新 1：该程序目前正在构建良好。我分配了一个实例变量，panorama: any;然后继续尝试使用以下函数和分配更新变量。
/**
* Creates the map options for panorama generation. This includes adjusting the coordinate
* position of a user to the nearest available street view. Following creation of the settings,
* it generates the street view on a user's device.
*
* @param userLocation a JSON object whose keys are 'lat' and 'lng' and whose values are
* the corresponding latitude and longitude respectively
*/
generatePanorama(userLocation): void {
var streetviewService = new google.maps.StreetViewService;
streetviewService.getPanorama({
location: userLocation,
preference: google.maps.StreetViewPreference.NEAREST,
radius: 100},
function(result, status) {
console.log("Adjusted latitude: ", result.location.latLng.lat(),
"\nAdjusted longitude: ", result.location.latLng.lng());
this.panorama = new google.maps.StreetViewPanorama(document.getElementById('street-view'), {
position: result.location.latLng,
pov: {heading: 165, pitch: 0},
zoom: 1
});
});
}
当我这样做然后尝试panorama在另一个函数中使用该变量时，它似乎认为panorama是一个空变量。此外，全景地图根本不加载！这是我尝试使用全景变量的第二个函数。
openShareModal() {
console.log("Final Latitude: ", this.panorama.getPosition().lat());
console.log("Final Longitude: ", this.panorama.getPosition().lng());
console.log("Final Heading:", this.panorama.getPov().heading);
console.log("Final Heading:", this.panorama.getPov().pitch);
let myModal = this.modalCtrl.create(ShareModalPage);
myModal.present();
}
更新 2：发布我的整个代码块以寻求帮助。
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, ModalController } from 'ionic-angular';
import { ShareModalPage } from '../share-modal/share-modal';
import { Geolocation } from 'ionic-native';
declare var google;
/**
* Generated class for the StreetViewModalPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-street-view-modal',
templateUrl: 'street-view-modal.html',
})
export class StreetViewModalPage {
@ViewChild('map') mapElement;
map: any;
panorama: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
public viewCtrl: ViewController, public modalCtrl: ModalController) {}
ionViewDidLoad() {
console.log('ionViewDidLoad StreetViewModalPage');
this.initMap();
}
/**
* Creates the map options for panorama generation. This includes adjusting the coordinate
* position of a user to the nearest available street view. Following creation of the settings,
* it generates the street view on a user's device.
*
* @param userLocation a JSON object whose keys are 'lat' and 'lng' and whose values are
* the corresponding latitude and longitude respectively
*/
generatePanorama(userLocation): void {
var streetviewService = new google.maps.StreetViewService;
streetviewService.getPanorama({
location: userLocation,
preference: google.maps.StreetViewPreference.NEAREST,
radius: 100},
function(result, status) {
console.log("Adjusted latitude: ", result.location.latLng.lat(),
"\nAdjusted longitude: ", result.location.latLng.lng());
this.panorama = new google.maps.StreetViewPanorama(document.getElementById('street-view'), {
position: result.location.latLng,
pov: {heading: 165, pitch: 0},
zoom: 1
});
});
}
/**
* Uses a device's native geolocation capabilities to get the user's current position
*
* @return a JSON object whose keys are 'lat' and 'lng' and whose calues are the corresponding
* latitude and longitude respectively
*/
getLocation(callback): void {
Geolocation.getCurrentPosition().then((position) => {
console.log("Latitude: ", position.coords.latitude, "\nLongitude: ", position.coords.longitude);
callback({lat: position.coords.latitude, lng: position.coords.longitude});
}).catch((error) => {
console.log('Error getting location', error);
});
}
/**
* Initialize a Google Street View Panorama image
*/
initMap(): void {
this.getLocation(this.generatePanorama);
}
/**
* Generates a URL to query the Google Maps API for a static image of a location
*
* @param lat the latitude of the static image to query
* @param lng the longitude of the static image to query
* @param heading indicates the compass heading of the camera
* @param pitch specifies the up or down angle of the camera relative to the street
* @return a string that is the URL of a statically generated image of a location
*/
generateStaticMapsURL(lat, lng, heading, pitch): string {
var url = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=";
url += lat + "," + lng;
url += "&heading=" + heading;
url += "&pitch=" + pitch;
url += "&key=XXXXXXXXXXXX"; // TODO : Make private
return url;
}
openShareModal() {
console.log("Final Latitude: ", this.panorama.getPosition().lat());
console.log("Final Longitude: ", this.panorama.getPosition().lng());
console.log("Final Heading:", this.panorama.getPov().heading);
console.log("Final Heading:", this.panorama.getPov().pitch);
let myModal = this.modalCtrl.create(ShareModalPage);
myModal.present();
}
}
以及相应的 HTML...
<ion-content>
<div #map id="street-view" style="height:100%; width:100%;"></div>
<button ion-button style="position: absolute; top: 5px; right: 5px; z-index: 1;" (click)="openShareModal()" large><ion-icon name="camera"></ion-icon></button>
</ion-content>