Javascript Baiduの地図インターフェース開発ドキュメントの種類と方法を詳しく説明します。
6828 ワード
JavaScript API v 2.0の紹介
Baiduの地図JavaScript APIはJavaScript言語によって作成されたアプリケーションインターフェースです。ウェブサイトで機能が豊富で、相互性が強い地図アプリケーションを構築するのを助けることができます。地図の基本的な機能を構築するための各種インターフェースを含みます。
このAPIは無料で公開されています。v 1.5バージョンから、鍵(ak)を先に申請しないと使えません。インターフェース(ショートメール送信機能以外)は使用回数に制限がありません。
JavaScript APIは初めてHttpsサービスをサポートします。もしHttpsサービスを申請する必要があれば、企業情報を認証してください。企業認証ユーザーになったら、httpsは自動的に開通します。同時により高いサービス割当額を獲得します。
注意:JavaScript APIのみ
V 2.0バージョンはhttpsをサポートしていますが、他のJavaScript APIバージョンはサポートされていません。httpsサービスを利用して、まずあなたのバージョンと配置の注意事項を確認してください。
APIの基本ファイルフォーマットを呼び出します。
JavaScript APIサービスの獲得方法:
JS API v 1.5から最新のバージョンは2.0です。まず鍵(ak)を申請する必要があります。API JSファイルを成功的にロードすることができます。
akの使い方は以下の通りです。
地図の例を作成
地図にコントロールを追加:
地図の内容をすべて重ねたり覆ったりします。私たちは地図の覆いと総称しています。ラベル、ベクトルの図形要素(折れ線と多角形と円を含む)、情報ウィンドウなど。カバーは自分の地理的座標を持っています。地図をドラッグしたり拡大したりすると、それに応じて移動します。
情報ウィンドウは地図の上に浮動してHTMLコンテンツを表示します。情報ウィンドウは、地図上の任意の位置で直接に開くことができます。また、表示オブジェクト上で開くこともできます。この場合、情報ウィンドウの座標は表示の座標と一致します。InfoWindowを使って情報ウィンドウのインスタンスを作成できます。同じ時刻地図上に情報ウィンドウが一つしかないことに注意してください。
イベント方法はMapイベント機構と同じである。参照できるイベント部分
傍受表示事件:
Geolocation地図を位置付けして、ユーザーの現在の位置を返します。この方法はブラウザのgeolocationインターフェースを利用して、ユーザの現在位置を取得します。サポートされていないブラウザは取得できません。
Geolocationオブジェクトの例を作成します。
Local Cityのようなユーザの所在する都市位置情報を取得するために使用されます。ユーザーのIPに基づいて都市に自動位置決めする)
Local Cityオブジェクトの例を作成します。
経緯度の例をクリックして取得します。
Geocoderクラスはユーザーのアドレス解析を取得するために使用されます。
ウォーキング・ロuteは、ウォーキングコースの計画案を取得するために使用されます。歩行ガイドの例を作成します。locationは検索エリアを表し、タイプは地図のインスタンス、座標ポイントまたは都市名の文字列とすることができます。パラメータが地図の例の場合、検索位置は現在の地図の中心点で決定される。パラメータが座標の場合、検索位置はその点の位置によって決定されます。パラメータが都市名の場合、検索はその都市内で行われます。
歩行計画の例:
DrivingRouteこのような運転ルートの計画案を取得するために使用されます。
運転ルート計画例:
Transit Routeはバス路線計画案を取得するために使用されます。
バス検索例:
Local Searchは位置検索、周辺検索、範囲検索に使います。
キーワード検索の例:
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてほしいです。もし疑問があれば、メッセージを残して交流してもいいです。
Baiduの地図JavaScript APIはJavaScript言語によって作成されたアプリケーションインターフェースです。ウェブサイトで機能が豊富で、相互性が強い地図アプリケーションを構築するのを助けることができます。地図の基本的な機能を構築するための各種インターフェースを含みます。
このAPIは無料で公開されています。v 1.5バージョンから、鍵(ak)を先に申請しないと使えません。インターフェース(ショートメール送信機能以外)は使用回数に制限がありません。
JavaScript APIは初めてHttpsサービスをサポートします。もしHttpsサービスを申請する必要があれば、企業情報を認証してください。企業認証ユーザーになったら、httpsは自動的に開通します。同時により高いサービス割当額を獲得します。
注意:JavaScript APIのみ
V 2.0バージョンはhttpsをサポートしていますが、他のJavaScript APIバージョンはサポートされていません。httpsサービスを利用して、まずあなたのバージョンと配置の注意事項を確認してください。
APIの基本ファイルフォーマットを呼び出します。
JavaScript APIサービスの獲得方法:
JS API v 1.5から最新のバージョンは2.0です。まず鍵(ak)を申請する必要があります。API JSファイルを成功的にロードすることができます。
akの使い方は以下の通りです。
<script src="http://api.map.baidu.com/api?v=2.0&ak" " type="text/javascript">
パラメータvはAPIの現在のバージョン番号で、現在の最新バージョンは2.0です。1.2バージョンの前にサービス部分をロードするかどうかをAPIに通知するためにservicesパラメータを設定してもいいです。trueはローディングを表しています。falseはローディングしないと表しています。デフォルトはtrueです。地図の例を作成
var map = new
BMap.Map("container");
//
var point = newBMap.Point(104.045,30.559);
//
map.centerAndZoom(point,15);
Baiduの地図のコントロール地図にコントロールを追加:
map.addControl(newBMap.NavigationControl());
// :
var opts = {offset: newBMap.Size(150, 5)}
map.addControl(newBMap.ScaleControl(opts));
// :
var opts = {type:BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(newBMap.NavigationControl(opts));
地図の覆い地図の内容をすべて重ねたり覆ったりします。私たちは地図の覆いと総称しています。ラベル、ベクトルの図形要素(折れ線と多角形と円を含む)、情報ウィンドウなど。カバーは自分の地理的座標を持っています。地図をドラッグしたり拡大したりすると、それに応じて移動します。
map.addOverlay
方法を用いて地図にカバーを追加し、map.removeOverlay
方法を用いてカバーを除去することができ、この方法はInfoWindowには適用されないことに留意されたい。
// :
var marker = newBMap.Marker(new BMap.Point(104.045,30.559));
// :
map.addOverlay(marker);
地図情報ウィンドウのヒント情報ウィンドウは地図の上に浮動してHTMLコンテンツを表示します。情報ウィンドウは、地図上の任意の位置で直接に開くことができます。また、表示オブジェクト上で開くこともできます。この場合、情報ウィンドウの座標は表示の座標と一致します。InfoWindowを使って情報ウィンドウのインスタンスを作成できます。同じ時刻地図上に情報ウィンドウが一つしかないことに注意してください。
var opts = {
width : 250,//
height: 100,//
title : "Hello"//
}
var infoWindow = newBMap.InfoWindow("World", opts);//
map.openInfoWindow(infoWindow,map.getCenter());//
地図情報ウィンドウのヒント(イベントトリガー表示)イベント方法はMapイベント機構と同じである。参照できるイベント部分
傍受表示事件:
marker.addEventListener("click",function(){
alert(" ");
});
表示にクリックを追加します。
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,map.getCenter());
});
位置決め(ブラウザの位置付け)Geolocation地図を位置付けして、ユーザーの現在の位置を返します。この方法はブラウザのgeolocationインターフェースを利用して、ユーザの現在位置を取得します。サポートされていないブラウザは取得できません。
Geolocationオブジェクトの例を作成します。
var geolocation = newBMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){ //
var mk = new BMap.Marker(r.point);//
map.addOverlay(mk);
map.panTo(r.point);//
alert(' :'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
})
位置決め(IP位置決め)Local Cityのようなユーザの所在する都市位置情報を取得するために使用されます。ユーザーのIPに基づいて都市に自動位置決めする)
Local Cityオブジェクトの例を作成します。
myCity = new BMap.LocalCity();
myCity.get(function(e){
map.setCenter(e.name);
alert(e.name);
});
位置決め(経緯度位置決め)経緯度の例をクリックして取得します。
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
経緯度による位置決め例:
var new_point = new BMap.Point(116.299689,40.1196618);
var marker = newBMap.Marker(new_point);//
map.addOverlay(marker);//
map.panTo(new_point);
アドレス解析
var myGeo = newBMap.Geocoder();//
// ,
myGeo.getPoint(" ", function(point){
if (point) {
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point)); //
}else{
alert(" !");
}
}, " ");
逆アドレス解析Geocoderクラスはユーザーのアドレス解析を取得するために使用されます。
var geoc = newBMap.Geocoder();
map.addEventListener("click",function(e){
var pt = e.point; //
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " +addComp.city + ", " + addComp.district + ", " +addComp.street + ", " + addComp.streetNumber);
});
歩行計画ウォーキング・ロuteは、ウォーキングコースの計画案を取得するために使用されます。歩行ガイドの例を作成します。locationは検索エリアを表し、タイプは地図のインスタンス、座標ポイントまたは都市名の文字列とすることができます。パラメータが地図の例の場合、検索位置は現在の地図の中心点で決定される。パラメータが座標の場合、検索位置はその点の位置によって決定されます。パラメータが都市名の場合、検索はその都市内で行われます。
歩行計画の例:
var walking = newBMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search(" ", " ");
:
var walking = newBMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
walking.search(" ", " ");
運転計画DrivingRouteこのような運転ルートの計画案を取得するために使用されます。
運転ルート計画例:
var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});
driving.search(" ", " ");
バス検索Transit Routeはバス路線計画案を取得するために使用されます。
バス検索例:
var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});
transit.search(" ", " ");
情報検索Local Searchは位置検索、周辺検索、範囲検索に使います。
キーワード検索の例:
var local = new BMap.LocalSearch(map,{
renderOptions:{map: map}
});
local.search(" ");
ローカル検索結果の例:
var local = newBMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search(" ");
締め括りをつける以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてほしいです。もし疑問があれば、メッセージを残して交流してもいいです。