Baiduのmap_javascriptスキルにスケール、サムネイル、パン、ズームのコントロールを追加する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Baiduのmap_javascriptスキルにスケール、サムネイル、パン、ズームのコントロールを追加する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

以下は、画像とテキストを使用してスケール、サムネイル、パン、ズームのコントロールを追加する Baidu マップの詳細な紹介です。

マップコントロールの概要
地図との対話を担当する Baidu Maps 上の UI 要素は、コントロールと呼ばれます。 Baidu Map API は豊富なコントロールを提供しており、Control クラスを通じてカスタムコントロールを実装することもできます。

地図 API で提供されるコントロールは次のとおりです:

コントロール: コントロールの抽象基本クラス。すべてのコントロールはこのクラスのメソッドとプロパティを継承します。このクラスを使用すると、カスタムコントロールを実装できます。
NavigationControl: マップのパンとズームのコントロール。PC ではデフォルトでマップの左上隅にあり、マップのパンとズームを制御する機能が含まれています。モバイルバージョンでは、デフォルトでマップの右下に位置するズームコントロールが提供されます。
OverviewMapControl: デフォルトでマップの右下に位置するサムネイルマップコントロールは、折りたたみ可能なサムネイルマップです。
ScaleControl: デフォルトでマップの左下に位置するスケールコントロール。マップの縮尺関係を示します。
MapTypeControl: マップタイプコントロール。デフォルトでマップの右上隅にあります。
CopyrightControl: 著作権コントロール。デフォルトではマップの左下にあります。
GeolocationControl: モバイル端末向けに開発された位置制御。デフォルトで地図の左下に配置されます
マップにコントロールを追加します
Map.addControl() メソッドを使用して、マップにコントロールを追加できます。この前にマップを初期化する必要があります。たとえば、標準のマップコントロールをマップに追加するには、コードに次のコードを追加します:

コードをコピーしますコードは次のとおりです:

var map = new BMap.Map("コンテナ");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());

複数のコントロールをマップに追加できます。この例では、パンとズームコントロール、スケールコントロール、およびサムネイルコントロールをマップに追加します。コントロールがマップに追加されると、すぐに有効になります。

コードをコピーしますコードは次のとおりです:

map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("Beijing"); // MapTypeControlの切り替え機能は都市情報を設定する場合のみ使用可能

制御制御位置

コントロールを初期化するときに、アンカー プロパティとオフセット プロパティが共同してマップ上のコントロールの位置を制御するオプションのパラメーターを指定できます。 

 コントロールのドッキング位置アンカーは、コントロールのドッキング位置、つまりコントロールがマップのどの隅にドッキングされているかを示します。マップ サイズが変更されると、コントロールはドッキング位置に応じてその位置を調整します。アンカーに許可される値は次のとおりです:

BMAP_ANCHOR_TOP_LEFT は、コントロールがマップの左上隅に配置されていることを意味します。

BMAP_ANCHOR_TOP_RIGHT は、コントロールがマップの右上隅に配置されていることを示します。
BMAP_ANCHOR_BOTTOM_LEFT は、コントロールがマップの左下隅に配置されていることを示します。

BMAP_ANCHOR_BOTTOM_RIGHT は、コントロールがマップの右下隅に配置されていることを示します。

制御位置オフセット

ドッキング位置の指定に加えて、オフセットを使用してコントロールがマップ境界から何ピクセル離れているかを示すこともできます。 2 つのコントロールのドッキング位置が同じ場合、コントロールが重なることがあります。この場合、オフセット値を使用して 2 つを別々に表示できます。

この例では、スケールバーをマップの左下隅に配置します。API にはデフォルトで著作権情報があるため、コントロールが重ならないようにいくつかのオフセット値を追加する必要があります。

コードをコピーします

コードは次のとおりです: var opts = {オフセット: 新しい BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts));

コントロール構成の変更

マップ API コントロールには豊富な構成パラメータが用意されており、API ドキュメントを参照してそれらを変更し、要件を満たすコントロールの外観を得ることができます。たとえば、NavigationControl コントロールは次のタイプを提供します:

コードをコピー

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

BMAP_NAVIGATION_CONTROL_LARGE は、完全なパンおよびズーム コントロールが表示されることを示します。 

BMAP_NAVIGATION_CONTROL_SMALL は、小さなパンとズームのコントロールが表示されることを示します。 

BMAP_NAVIGATION_CONTROL_PAN は、コントロールのパン機能のみが表示されることを示します。 

BMAP_NAVIGATION_CONTROL_ZOOM は、コントロールのズーム部分のみが表示されることを示します。

以下の図は、上記のさまざまなタイプのコントロールの外観を左から右に示しています。

上の図の最初の 4 つは PC 側のパンとズームのコントロールスタイルで、最後の 1 つはモバイル側のズームコントロールスタイルです。

次の例では、パンとズームのマップコントロールの外観を調整します。

上の図の最初の 4 つは PC 側のパンとズームのコントロールスタイルで、最後の 1 つはモバイル側のズームコントロールスタイルです。

次の例では、パンとズームのマップコントロールの外観を調整します。

サムネイルを追加

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
    #r-result{width:100%;margin-top:5px;}
    p{margin:5px; font-size:14px;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api&#63;v=2.0&ak=您的密钥"></script>
  <title>添加/删除地图类型、缩略图控件</title>
</head>
<body>
  <div id="allmap"></div>
  <div id="r-result">
    <input type="button" onclick="add_control();" value="添加" />
    <input type="button" onclick="delete_control();" value="删除" />
  </div>
  <p>点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图，点击按钮查看效果</p>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
  var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

  var overView = new BMap.OverviewMapControl();
  var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
  //添加地图类型和缩略图
  function add_control(){
    map.addControl(mapType1);     //2D图，卫星图
    map.addControl(mapType2);     //左上角，默认地图控件
    map.setCurrentCity("北京");    //由于有3D图，需要设置城市哦
    map.addControl(overView);     //添加默认缩略地图控件
    map.addControl(overViewOpen);   //右下角，打开
  }
  //移除地图类型和缩略图
  function delete_control(){
    map.removeControl(mapType1);  //移除2D图，卫星图
    map.removeControl(mapType2);
    map.removeControl(overView);
    map.removeControl(overViewOpen);
  }
</script>

ログイン後にコピー

レンダリング

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1666

CakePHP チュートリアル

1425

Laravel チュートリアル

1325

PHP チュートリアル

1272

C# チュートリアル

1252

Related knowledge

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles