パノラマ表示

概要

Baidu パノラマ マップは、パノラマ ビューに沿って市内の指定された道路と指定された地点をカバーする 360 度のパノラマ ビューを提供します。より現実的で直感的です。

パノラマ地図 API は現在、百度地図 (map.baidu.com) と同じ都市をカバーしており、百度地図と同じ更新頻度を維持しています。

Baidu LBS オープン プラットフォームは、JavaScript API を通じてパノラマ機能を提供します。デフォルトでは、PC 側はレンダリングに Flash テクノロジーを使用し、モバイル ブラウザ側は JavaScript レンダリングを使用して、さまざまなブラウザでサービスを利用できるようにします。なお、今回のFlashレンダリングにおけるクロスドメインの問題により、PC上でパノラマ機能を利用する場合、パノラマサンプルをサーバーにデプロイして表示する必要があり、サンプルを直接ダブルクリックしてもパノラマを表示できません。

パノラマエフェクトは次のとおりです。

パノラマコントロール

通常の操作からパノラマに入ることができます。パノラマ コントロールを使用したマップ マップ、パノラマ コントロールを追加する方法は、ツールバーや他のコントロールを追加する方法と似ています。

コードは次のとおりです:

var stCtrl = new BMap.PanoramaControl();  
stCtrl.setOffset(new BMap.Size(20, 20));  
map.addControl(stCtrl);

パノラマ コントロールをクリックしてパノラマに入ります。パノラマの右上隅にある閉じるボタンをクリックすると、通常のマップに戻ります。

パノラマ マップの使用方法

パノラマ マップは、通常のマップと同様に div として Web ページに追加できます。以下に、パノラマを表示するためのコア コードとコードの説明を示します。

手順:

1) パノラマ マップをコンテナとして「含む」div を作成します。

2) パノラマ マップを作成します。オブジェクト (パノラマ)、コンストラクター パラメーターは 1) で作成した div id と同じです;

3) 緯度と経度の座標を設定して、特定の場所のパノラマ マップを表示します。緯度と経度の指定に加えて、コード コメント部分など、現在表示されているパノラマ ビューを設定するパノラマの ID を指定することもできます。

4) この 2 つパラメーターの見出しとピッチは、パノラマの視点を設定するために使用されます。見出しはカメラの水平方向 (「頭を振る」) 角度を指します。真北は 0、真東は 90、真南は 180、真西です。は 270、ピッチはカメラの垂直方向 (「うなずき」) を指します。

パノラママップコントロールの設定

PanoramaクラスのPanoramaOptionパラメータとsetOptionsメソッドを設定することで、ナビゲーションコントロール、道路誘導コントロール、パノラママップ内のフォトアルバムコントロールなど。

非表示のナビゲーション コントロールを設定するためのコア コードは次のとおりです:

<div id="panorama" style="width:100%;height:100%"></div>    //1  
<script type="text/javascript">  
window.onload = function(){  
    var panorama = new BMap.Panorama('panorama');   //2
    panorama.setPosition(new BMap.Point(120.320032, 31.589666));    //3  
    // panorama.setId('0100010000130501122416015Z1');  
    panorama.setPov({heading: -40, pitch: 6});  //4 
}  
</script>

コア コード道路誘導コントロールを設定するには次のようにします。

//通过PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {navigationControl: false}); //默认为显示导航控件，默认值为true
//通过setOptions方法指定
Panorama.setOptions({navigationControl:false});

上記の方法では、パノラマ アルバム コントロールを表示するかどうかも設定できます。

//通过PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {linksControl:false}); //默认为显示道路指引控件，默认值为true
//通过setOptions方法指定
Panorama.setOptions({linksControl:false});

に表示されるポイ タイプを設定します。 panorama

Panorama の setPanoramaPOIType メソッドでは、表示する POI タイプを指定できます。現在サポートされているタイプには、ホテル、レストラン、映画館、バス停、屋内シーンなどが含まれます。設定タイプが BMAP_PANORAMA_POI_NONE の場合、すべてのポイが非表示になることを意味します。

レストラン タイプのコア コードのみが、指定されたパノラマ ビュー内に表示されます:

panorama.setOptions({
    albumsControl: true,
    albumsControlOptions:{anchor:BMAP_ANCHOR_TOP_LEFT,  //设置相册显示位置
        offset:new BMap.Size(10,10),//设置相册距离左上角偏移量
        maxWidth:100%,//设置相册控件的最大显示宽度
        imageHeight:80//设置相册控件的高度
        }
    });

##屋内シーン マップの使用法

panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_CATERING); //餐饮 
panorama.setPov({pitch: 6, heading: 138});

var panorama = new BMap.Panorama('panorama', { 
    'disableIndoorSceneSwitchControl': true //默认为显示室内景场景点切换控件，默认值为false 
    }); 
panorama.setOptions({ 
    'disableIndoorSceneSwitchControl': true 
    });

var panorama = new BMap.Panorama('panorama', { 
    'disableIndoorSceneSwitchControl': true //默认为显示室内景场景点切换控件，默认值为false 
    }); 
panorama.setOptions({ 
    'disableIndoorSceneSwitchControl': true 
    });

var panorama = new BMap.Panorama('panorama');  
panorama.setPosition(new BMap.Point(120.320032, 31.589666));  
panorama.addEventListener('position_changed', function(e){ //注册全景位置改变事件  
    var pos = this.getPosition();  
    console.log(e.type);  
 
});

var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.403925,39.913903));//坐标点在天安门
 
var labelPosition = new BMap.Point(116.403925,39.913903);
var labelOptions = {
    position: labelPosition,
    altitude:5
};//设置标注点的经纬度位置和高度
var label = new BMap.PanoramaLabel('自定义标注-天安门广场', labelOptions);//创建全景标注对象
panorama.addOverlay(label);//在全景地图里添加该标注
panorama.setPov(label.getPov()); //修改点的视角，朝向该label