ホームページ >ウェブフロントエンド >htmlチュートリアル >Baidu Maps の簡単な使い方 --html js_html/css_WEB-ITnose
Baidu Maps の簡単な使い方 --html js_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:071123ブラウズ
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);
三、效果图