JavaScript で Baidu Maps API にアクセスする方法と手順

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=キー"></script>

var map = new BMapGL.Map("container"); // マップインスタンスを作成します var point = new BMapGL.Point(116.404, 39.915); // 地理的位置の緯度と経度でポイント座標を作成します map.centerAndZoom(point, 15); // マップを初期化し、中心点の座標とマップレベルを設定します

map.centerAndZoom(point, 15); // マップを初期化し、中心点の座標とマップ レベルを設定します。map.enableScrollWheelZoom(true); // マウス ホイール ズームを有効にします。map.setMapType(BMAP_EARTH_MAP); // マップ タイプを地球モードに設定します。

var scaleCtrl = new BMapGL.ScaleControl(); // スケールを追加します controlmap.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // ズームコントロールを追加します。map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 都市リストを追加します controlmap.addControl(cityCtrl);
var locationControl = new BMapGL.LocationControl(); // 配置を追加します controlmap.addControl(locationControl);

 //現在の地理的位置を取得し、地図の中心を位置決め位置に移動します。 var geolocation = new BMapGL.Geolocation(); //位置決めオブジェクトを作成します。 geolocation.getCurrentPosition(function (r) { //位置決めオブジェクトを通じて位置決め関数を呼び出します。コールバック関数のパラメーター r は位置決め結果を表します。 if (this.getStatus() == BMAP_STATUS_SUCCESS) { //位置決めが成功した場合 var mk = new BMapGL.Marker(r.point); //マーカーを作成します。r は位置決め結果、r.point は現在の位置です。 map.addOverlay(mk); //マーカー オブジェクトをマップに追加します。 map.panTo(r.point); //地図の中心を位置決め位置に移動します。 // alert('現在地: ' + r.point.lng + ',' + r.point.lat);
  }
  それ以外 {
    アラート('失敗' + this.getStatus());
  }
});

  //マップにクリックイベントを追加しますmap.addEventListener("click",function(e){
  //パラメータ名 e マップクリックイベントソース //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng); //マーカーを作成します。rは測位結果、r.pointは現在の位置です。map.addOverlay(mk); //マーカーオブジェクトをマップに追加します。})

 //マップにクリックイベントを追加しますmap.addEventListener("click",function(e){
  //パラメータ名 e マップクリックイベントソース //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng);//マーカーを作成します。r は測位結果、r.point は現在の位置です。mk.addEventListener("click",function(){//マーカーにクリック イベントを追加します。console.log(this);//this はマーカーを参照します。//マーカーはマップ オブジェクト map のサブタグであるため、マーカーをクリックするとバブルが表示され、マップのクリック イベントもトリガーされます。//イベント ソース オブジェクトの stopPropagation 関数を使用して、後続のイベント バブルを整理できます。event.stopPropagation();
  });
  map.addOverlay(mk); //マーカーオブジェクトをマップに追加します})

//情報ウィンドウを追加する（カプセル化された関数）
関数 addInfoWindow(コンテンツ、ポイント、幅、高さ、タイトル) {
  //必須パラメータコンテンツとポイント
  //コンテンツはテキストまたはラベルのいずれかです //ポイントは地理的位置の緯度と経度です //次の3つのパラメータはオプションです var opts = {
    width: 幅、// 情報ウィンドウの幅 height: 高さ、// 情報ウィンドウの高さ title: タイトル、// 情報ウィンドウのタイトル}
  var infoWindow = new BMapGL.InfoWindow(content, opts); // 情報ウィンドウオブジェクトを作成します。 map.openInfoWindow(infoWindow, point); // 情報ウィンドウを開きます。 }

//運転ルート計画オブジェクト //このオブジェクトは、マップが読み込まれた後に作成する必要があります。通常、マップ オブジェクト マップが作成された後に配置されます。また、Web ページは 1 回だけ作成する必要があります。そうしないと、最後に計画されたパスがクリアされません。 driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
// パス計画オブジェクトを使用してルートを検索します driving.clearResults(); // マップから最後に計画したパスをクリアします driving.search(startPoint, endPoint); // パス計画を開始し、開始点と終了点を渡します

//バス路線計画オブジェクト //バス路線計画オブジェクトの作成は、マップが読み込まれた後に行う必要があります。通常、マップオブジェクトマップが作成された後に配置されます。また、Web ページは 1 回だけ作成する必要があります。そうしないと、最後に計画されたルートがクリアされません。transit = new BMapGL.TransitRoute(map, {
  レンダリングオプション: { マップ: マップ },
  onSearchComplete: 関数 (結果) {
    (transit.getStatus() != BMAP_STATUS_SUCCESS) の場合 {
      戻る;
    }
    //alert(results.getNumPlans());//バス計画スキームの合計数を取得します//ここでバスルート計画表示用の HTML テンプレートを設計します var output = '';
    for(var i=0;i<results.getNumPlans();i++){
      var プラン = results.getPlan(i);
      output +='<div style="margin-top:5px; background-color:#CCC"><p>合計所要時間:'+plan.getDuration(true)+'</p>';//時間を取得output += '<p>合計距離:'+plan.getDistance(true)+'</p>'; //距離を取得output +=plan.getDescription(true)+"</div>";
    }
    $('#result').css('display', 'block'); //#result は独自に定義した div です。絶対位置指定で非表示にします。パス プランニングが正常に表示されます。$('#result').html(output); // 組み立てられたパス プランニング HTML タグ テンプレートを #result div に配置して表示します。},
});
transit.clearResults(); // 最後に計画したルートをクリア transit.search(startPoint, endPoint); // バスルートの計画

// ジオコーディングインスタンスを作成します。var myGeo = new BMapGL.Geocoder();      
// 座標に基づいて住所の説明を取得します。myGeo.getLocation(経度と緯度の座標、function(result){
    //関数は特定の地理情報が見つかった後にのみ実行されるコールバック関数です。if (result){      
      アラート(結果.アドレス);      
    }      
});

// アドレス パーサー インスタンスを作成します。var myGeo = new BMapGL.Geocoder();
// 住所解決結果を地図上に表示し、地図ビューを調整します。myGeo.getPoint(address string (Hongqihegou, Chongqing), function(point){
    if(ポイント){
        //point は緯度と経度のポイントです}else{
        alert('選択したアドレスは結果に解決されませんでした!');
    }
}, オプション パラメータ) // 都市名を渡すオプション パラメータ。渡されない場合は、グローバルに検索します。都市名を渡すと、この都市のみで検索されます。