2015年6月21日 星期日

Google street view overlay

 從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。

透過簡單的設定兩個座標,即能簡易的將照片放入街景中,還能自己調整位置呢。







沒有留言:

張貼留言