JavaScriptとTencent Mapsを利用して地図ストリートビュー表示機能を実装

JavaScript と Tencent Maps を使用して地図ストリートビュー表示機能を実装します

地図ストリートビュー表示機能は、現代のナビゲーション、観光、地理の分野で非常に一般的です情報。より直感的でリアルなストリートビュー画像をユーザーに提供できるため、ユーザーは目的の場所をよりよく理解し、閲覧できるようになります。

この記事では、JavaScript と Tencent Map API を使用して地図ストリートビュー表示機能を実装する方法と、具体的なコード例を紹介します。開始する前に、その後の開発作業を容易にするために、Tencent Map API の開発キーを申請して取得していることを確認してください。

まず、Tencent Map の JavaScript API ライブラリを HTML ファイルに導入します。

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>

YOUR_API_KEY を独自の Tencent Map API キーに置き換える必要があることに注意してください。

次に、JavaScript コードでマップ インスタンスを作成し、マップの中心点とズーム レベルを設定します。

var map = new qq.maps.Map(document.getElementById("map"), {
  center: new qq.maps.LatLng(39.9087, 116.3975),
  zoom: 15
});

ここでは、マップ コンテナーの ID が「map」であると仮定します。マップの中心点の座標は (39.9087, 116.3975) で、ズーム レベルは 15 です。

次に、ストリート ビュー サービス インスタンスを作成し、ストリート ビュー サービスを地図に追加する必要があります:

var streetView = new qq.maps.StreetViewService();
map.setStreetView(streetView);

次に、ストリート ビュー コントロールを地図に追加し、以下に基づいてリッスンします。ユーザーの操作 ストリート ビュー コントロールのクリック イベント:

var streetViewControl = new qq.maps.StreetViewControl();
map.controls[qq.maps.ControlPosition.TOP_RIGHT].push(streetViewControl);

qq.maps.event.addListener(streetViewControl, "click", function() {
  var center = map.getCenter();
  streetView.getPanoramaByLocation(center, 100, function(panoData) {
    if (panoData) {
      var panoOptions = {
        pano: panoData.id,
        pov: {
          heading: 0,
          pitch: 0
        }
      };
      map.getStreetView().setOptions(panoOptions);
    } else {
      alert("此位置没有街景图像！");
    }
  });
});

上記のコードでは、まずストリート ビュー コントロールを作成し、それを地図の右上隅に追加します。次に、ユーザーがストリート ビュー コントロールをクリックすると、地図の中心点の座標が取得され、ストリート ビュー サービスを使用してその場所のストリート ビュー データが取得されます。ストリート ビュー データが利用可能な場合は、それを地図のストリート ビュー画像表現として設定します。

最後に、上記のコードを window.onload イベントに配置して、ページが完全に読み込まれた後にコードが実行されるようにします。完全な HTML コードは次のとおりです。

  
    
    
    
  
  
    


    <script>
      window.onload = function() {
        var map = new qq.maps.Map(document.getElementById("map"), {
          center: new qq.maps.LatLng(39.9087, 116.3975),
          zoom: 15
        });

        var streetView = new qq.maps.StreetViewService();
        map.setStreetView(streetView);

        var streetViewControl = new qq.maps.StreetViewControl();
        map.controls[qq.maps.ControlPosition.TOP_RIGHT].push(streetViewControl);

        qq.maps.event.addListener(streetViewControl, "click", function() {
          var center = map.getCenter();
          streetView.getPanoramaByLocation(center, 100, function(panoData) {
            if (panoData) {
              var panoOptions = {
                pano: panoData.id,
                pov: {
                  heading: 0,
                  pitch: 0
                }
              };
              map.getStreetView().setOptions(panoOptions);
            } else {
              alert("此位置没有街景图像！");
            }
          });
        });
      };
    </script>

    <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>
  

この関数を使用する場合、エラー処理やユーザー インタラクションの追加など、実際の状況に応じてコードを最適化する必要があることに注意してください。同時に、Tencent Map API の使用仕様と規約に従い、対応する開発仕様と制限事項に従います。

この記事が、マップ ストリート ビュー表示機能を実装し、アプリケーションにさらにインタラクティブなエクスペリエンスを追加するのに役立つことを願っています。

以上がJavaScriptとTencent Mapsを利用して地図ストリートビュー表示機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。