從Google street view service api中,以坐標找尋到需要的街景,而要如何將圖片放置於街景之中呢?
http://projects.teammaps.com/projects/streetviewoverlay/streetviewoverlay.htm
這個demo以street view overlay達成了目標,將圖片放進一個div中,通過以下的調整來完成。
//照片於地圖中緯度、經度
this.lat = 24.122613;
this.lng = 120.674283;
this.zoom = 16;
//街景車的緯度、經度
this.slat = 24.122613;
this.slng = 120.674283;
//照片檔
this.image = "nchu.gif";
this.pt = new google.maps.LatLng(this.lat, this.lng);
this.streetPt = new google.maps.LatLng(this.slat, this.slng);
// 方位角度、仰俯角度、遠近
this.sheading = 180;
this.spitch = 20;
this.szoom = 1;
this.distance = 40; // distance in metres from street view to marker
this.maximumDistance = 200; // distance beyond which marker is hidden
// dimensions of street view container (fixed)
this.panWidth = 400;
this.panHeight = 480;
// 照片寬度、高度
this.markerWidth = 180;
this.markerHeight = 120;
而要如何確定照片的位置能夠正確呢?
由於Google街景中的座標是由拍攝該照片的街景車位置所決定,透過heading來調整所攝影的,heading是以360度為調整,而heading調整過後,需要調整圖片的經緯度以讓圖片能放在正確的方位及位置上,而調整的原則即為兩者間的相對方位。
下面簡單介紹地圖中的相對位置:
中間點即為街景車位置,外圈為所看到實景位置。
透過heading的角度來調整lat, lng。
透過簡單的設定兩個座標,即能簡易的將照片放入街景中,還能自己調整位置呢。
沒有留言:
張貼留言