JavaScriptは百度の地図APIを埋め込む最も詳しい方法です。

6889 ワード
js。 Baiduの地図 API
まず効果図を見る
在这里插入图片描述
一、百度開発者に申請し、地図APIインターフェースを利用する権限を得て、コードを取得する。
1.百度地図開放プラットフォームを開く
ウェブサイトを開きます。http://lbsyun.baidu.com/、最初のページのナビゲーションバーの開発文書を見つけました。
在这里插入图片描述
2.その後、開発文書の下のWeb開発中のJavaScript APIを見つけ、開く
在这里插入图片描述
開いたら開発ガイドを見つけて開けて、アカウントと鍵を見つけて開けます。
**在这里插入图片描述**
3.その後IDの申請と百度開発者になるための操作を行うには、メールで検証が必要です。
在这里插入图片描述
アカウントの作成が完了したら、サービス鍵を開く（AK）
アプリケーションタイプ選択ブラウザ端
在这里插入图片描述
4.アプリケーション名は自分の必要に応じて、サービスの全選択ホワイトリストの設定を有効にします。このように全域でセキュリティレベルが低いので、オンラインバージョンの前に提出してください。
在这里插入图片描述
5.提出が完了したら、これらの設定情報はアプリケーション管理の私のアプリケーションで確認できます。
在这里插入图片描述
準備が完了しました。使用中にコードだけを書き込む必要があります。
（AK）：7 uXq 0 qF 1 FNg 7 qgwriDofp 2 Ft 3 hxGFb
二、最初の図の効果を実現する（開発者ガイドを参照することができる）
1.ハローワールドマニュアルによる操作
在这里插入图片描述
2.コードブロックをDemoに書き込む
生成したakの値をコピーします。
在这里插入图片描述
地図のブロック要素を表示するエリアに配置します。
在这里插入图片描述
js部分を書き込みます
在这里插入图片描述

<!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="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=    ">
</script>
</head> 
  
<body> 
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
//        
var point = new BMapGL.Point(116.404, 39.915);
//       
map.centerAndZoom(point, 15);
//      ，             
</script> 
</body> 
</html>
完了したらページを開きます。
在这里插入图片描述
3.マウスホイールの拡大縮小をオンにする
地図のマウスホイール拡大はデフォルトでは閉じられています。設定をオンにする必要があります。

map.enableScrollWheelZoom(true);     //
4.表示を追加し、表示で現在位置の経緯度を取得する
在这里插入图片描述
表示の作成

var marker = new BMap.Marker(point);        //         
map.addOverlay(marker);                     //
表示アイコンの定義

function addMarker(point, index){  //          
    var myIcon = new BMap.Icon("markers.jpg", new BMap.Size(23, 25), {    
        //       。   
        //           ，                   
        //     10   25  。                 
        //            。    
        anchor: new BMap.Size(10, 25),    
        //       。   
        //                          ，    
        //            ，    css sprites    。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   //           
    });      
    //                
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}
表示をクリックして現在の経緯度を取得します。

marker.addEventListener("click", function(){    
    alert("    ：" + e.point.lng + ", " + e.point.lat);    
});
在这里插入图片描述
地図を拡大縮小して自分の位置をマークします。経緯度を取得してコードに記入します。
在这里插入图片描述
在这里插入图片描述
現在の位置に位置しています。
在这里插入图片描述
基本的に地図を導入しました。
5.情報ウィンドウを有効にする
在这里插入图片描述
情報ウィンドウは地図の上に浮動表示されているHTMLの内容で、地図上の任意の位置で直接開くことができます。また、表示オブジェクト上で開くこともできます。
注意：地図上では同じ時刻に情報ウィンドウが開いているだけです。

var opts = {    
    width : 250,     //           
    height: 100,     //           
    title : "Hello"  //          
}    
var infoWindow = new BMap.InfoWindow("World", opts);  //             
map.openInfoWindow(infoWindow, map.getCenter());      //
この時のページ効果
在这里插入图片描述
6.カスタム情報ウィンドウ

var opts = {
        width: 280,     //           
        height:120,     //           
        title: ""  //          
    }
    var content  = 
    "<h6>    </h6>" +
    "<img style='float:right;margin:4px' id='imgDemo' src='./1.jpg' white='100px' height='80px' title='    ' />" +
    "<p style='font-size:12px' >              143 。                。       101,235   ，  80 ，  28 ，  2 。</p>"
    
    var infoWindow = new BMap.InfoWindow(content, opts);  //             
    map.openInfoWindow(infoWindow, map.getCenter());      //
ページ効果が完了しました。
在这里插入图片描述
三、地図の左下のロゴレベルの文字を削除します。
除去前の
文字を削除します。cssを追加するだけでいいです。

.BMap_cpyCtrl {
    display:none;
}
地図のロゴを削除します。cssを追加するだけです。

.anchorBL{
   	 display:none;
}
四、より多くの機能
Baiduの地図開発者マニュアルを確認してください。
ここでは、JavaScriptがBaiduの地図APIに埋め込まれた最も詳細な方法についての記事を紹介します。js Baiduの地図APIの内容については、以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。
jsメニューコードjsメニュー特効コード
Androidのカスタム実現BaseAdapter（汎用アダプター3）