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 までご連絡ください。

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグインMar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。更新されたプラグインは、jQuery 1.6.4以降で動作します。ダウンロードしてください

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

Matter.jsを始めましょう：はじめにMar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、