Baidu Maps の簡単な使い方 --html js_html/css_WEB-ITnose
1. はじめに
Baidu Map JavaScript API は、JavaScript 言語で記述されたアプリケーション プログラミング インターフェイスのセットであり、地図構築の基本機能を含む、機能豊富で高度にインタラクティブな地図アプリケーションを Web サイト上に構築するのに役立ちます。さまざまなインターフェイスにより、ローカル検索やルート計画などのデータ サービスが提供されます。
基本的な地図機能: 表示 (2D 画像、3D 画像、衛星画像をサポート)、パン、ズーム、ドラッグなど。
マップコントロール表示機能: イーグルアイ、ツールバー、スケール、カスタム著作権、マップタイプ、マップ上の位置コントロールの追加/削除、各種コントロールの表示位置の設定が可能です。
オーバーレイ機能:地図上の点、線、エリア、ホットエリア、行政区画、ユーザー定義のオーバーレイなどの追加/削除をサポートし、オープンソースライブラリは豊富な注釈、注釈マネージャー、集計マーカー、およびカスタム機能を提供します。オブジェクトとその他の機能をオーバーレイします。
ツール機能: 緯度と経度の座標と画面座標を変換する機能を提供します。オープンソース ライブラリは、測距、幾何学的操作、GPS 座標/国家測量局座標から Baidu 座標への変換などの機能を提供します。
測位機能：IP測位とブラウザ（HTML5機能ブラウザをサポート）測位機能をサポートします。
右クリックメニュー機能: 地図上での右クリックメニューの追加をサポートします。
マウスインタラクション機能：マウススタイルの動的変更、マップのマウスドラッグ/ズーム、マウス描画などの機能をサポートします。
レイヤー機能: マップ ベースマップのリセット、マップ上でのリアルタイム交通レイヤーのオーバーレイ、またはレイヤー機能のカスタマイズをサポートします。
ローカル検索機能: 都市、長方形範囲、円形範囲、その他の条件に基づくPOI検索を含み、ユーザーが所有するデータの検索をサポートします。
公共交通機関の検索: 3 つの検索条件をサポートします: 始点座標、始点名、LocalSearchPoi インスタンス。検索結果は 4 つのオプションをサポートします: 便利、乗り換え可能、徒歩が少ない、地下鉄に乗らない。
運転検索: 出発地座標、出発地名、LocalSearchPoi インスタンスの 3 つの検索条件の検索をサポートし、最短時間、最短距離、高速道路を回避した運転ナビゲーション結果を返し、タクシー料金計算サービスを提供します。
ウォーキングナビゲーション: ウォーキングナビゲーションソリューションを提供します。
リバース/ジオコーディング: Baidu 座標と住所記述情報の間の変換サービスをサポートします。
パーソナライズされたデータ表示機能: ユーザー自身のデータが LBS クラウドに保存された後、JavaScript API は自分のデータをあばた図の形式で表示する機能を提供できます。
2. マップの紹介
天安門広場をマップの中心としてマップが作成されました: (秘密キーは自分で入手する必要があります、秘密キーは次の場所で入手できます: http:// www.cnblogs.com/0201zcr /p/4675028.html)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥">//v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"</script></head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script> </body> </html>
各部分の役割を解析する:
ページを準備する
HTML標準に従って、すべてのHTMLドキュメントは正しいドキュメントを宣言する必要がありますHTML5 仕様に準拠した最新の Document 宣言を使用することをお勧めします:
<!DOCTYPE html>
以下に、ページをモバイル プラットフォームでより適切に表示するためにメタ タグを追加します。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
次に、地図がブラウザ ウィンドウ全体に表示されるようにスタイルを設定します。
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
参照 Baidu 地図 API ファイル V1 を使用します。 4 および以前のバージョンを引用する方法:
マップ コンテナ要素を作成する マップをページ上に表示するには、コンテナとして HTML 要素が必要です。ここでは div 要素を作成しました。名前空間 API は名前空間として BMap を使用し、BMap.Map、BMap.Control、BMap.Overlay などのすべてのクラスはこの名前空間の下にあります。
マップ インスタンスの作成
var map = new BMap.Map("container");
BMap 名前空間の下にある Map クラスはマップを表し、マップ インスタンスは new 演算子を通じて作成できます。そのパラメータは要素 ID または要素オブジェクトにすることができます。
このコンストラクターを呼び出すときは、コンテナ要素がマップに追加されていることを確認する必要があることに注意してください。
点座標を作成する
var point = new BMap.Point(116.404, 39.915);
ここでは、BMap 名前空間で Point クラスを使用して座標点を作成します。 Point クラスは地理座標点を記述します。116.404 は経度を表し、39.915 は緯度を表します。
マップの初期化
map.centerAndZoom(point, 15);
マップインスタンスを作成した後、BMap.Map.centerAndZoom()メソッドで中心点の座標とマップレベルを設定する必要があります。 他の操作を実行する前に、マップを初期化する必要があります。
地图配置与操作
地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考的配置方法一节中找到。
此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。
下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); window.setTimeout(function(){ map.panTo(new BMap.Point(116.409, 39.918)); }, 2000);
三、效果图
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7338
9
1627
14
1352
46
1265
25
1210
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
