こんにちは世界
Baidu Map API の学習を始める最も簡単な方法は、簡単な例を見ることです。次のコードは、天安門を地図の中心とする地図を作成します:
<!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=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&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 仕様に準拠した最新のドキュメント宣言を使用することをお勧めします:
<!DOCTYPE html>あなたも必要に応じて、他のタイプのドキュメント宣言を選択して、ブラウザが標準的な方法でページをレンダリングして、ページの互換性を最大限に確保することができます。開発に Quirks モードを使用することはお勧めしません。 以下にメタ タグを追加して、ページをモバイル プラットフォームでより適切に表示できるようにします。
<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");ポイント座標の作成
var point = new BMap.Point(116.404, 39.915);
マップの初期化
map.centerAndZoom(point, 15);
マップ インスタンスを作成した後、それを初期化する必要があります。BMap.Map.centerAndZoom() メソッドでは、中心点の座標とマップ レベルを設定する必要があります。他の操作を実行する前に、マップを初期化する必要があります。
マップの構成と操作
マップがインスタンス化および初期化されると、マップを操作できるようになります。 API のマップ オブジェクトの外観と動作は、Baidu Map Web サイトで操作されるマップと非常に似ています。マウスのドラッグ、ホイールのズーム、ダブルクリックによるズームインなどの対話型機能をサポートします。構成を変更してこれらの機能を変更することもできます。たとえば、デフォルトでは、マップはマウス ホイールのズーム操作をサポートしていません。これは、ページ全体のユーザー エクスペリエンスに影響を与える可能性があるためです。しかし、マウス ホイールを使用してマップ内のズームを制御したい場合は、マップを呼び出すことができます。 .enableScrollWheelZoom メソッドを使用して有効にします。構成オプションは、「Map クラス リファレンス」の「構成メソッド」セクションにあります。
さらに、プログラムでマップを操作することもできます。 Map クラスは、マップの状態を変更するためのメソッドをいくつか提供します。例: setCenter()、panTo()、zoomTo() など。
次の例は、2 秒待った後に新しい中心点に移動するマップを示しています。 panTo() メソッドは、地図を新しい中心点にスムーズに移動します。移動距離が現在の地図領域サイズを超える場合、地図はその点に直接ジャンプします。
