02、高い道徳的なマップ

レディ

1、着陸登録キーの値：

https://lbs.amap.com/api/webservice/guide/create-project/get-key

図2は、管理コンソールアプリケーションに、アプリケーションを作成し、キーを追加します。

https://lbs.amap.com/dev/key/app

3、ヘルプドキュメント：

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

マップを作成します。

マップを作成するための同期方法

//引入地图JS
ます。<script type = "text / javascriptの" SRC = "https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e"> </ SCRIPT>

容器のマップは、幅と高さ//に提供される
<スタイルタイプ= "テキスト/ CSS">
#container {幅：100％;高さ：600PX;}
</スタイル>

マップ用のコンテナを導入する//必要性

//マップを作成し、マップがコンテナ船のIDに導入され
ます。<script type = "text / JavaScriptを">
新しい新しいAMap.Map（ 'コンテナ'）;
</ SCRIPT>

非同期マップの作成

//マップを作成し、マップは、コンテナ容器IDに導入される
<SCRIPT> 
window.init = 関数（）{
 　　新新しい AMap.Map（ 'コンテナ' ）; 
}
 </ SCRIPT> 

//マップJSが導入され、コールバックJS INITの先頭に
<SCRIPTタイプの= "テキスト/ JavaScriptを" SRC = "https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=init&callback=init"> </ SCRIPT> //、マップを作成し、マップは、コンテナ容器IDに導入される<スタイルタイプ= "テキスト/ CSS"> 
#container {：幅 100％：; 600PX高}
 </スタイル> マップするための容器を導入する//必要
<DIV ID = "コンテナ"> </ div>

マップ2つの非同期モードを作成します。

<スクリプト>

//マップを作成し、ページ構造をロードし、IDのコンテナ船の導入のマップ

window.onload =関数（）{
VARマップ=新しいAMap.Map（ 'コンテナ'）。
}

//輸入はトップにjsのonloadのコールバックJSをマッピングし、

VaRのURL = 'https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=onload';

//スクリプトを作成し、src属性のURLに割り当てられた
VAR JSAPI =のdocument.createElement（ 'スクリプト'）;
jsapi.charset = 'UTF-8';
jsapi.src = URL;

//ヘッドに生成されたスクリプトタグバック追加
document.head.appendChild（JSAPI）
</スクリプト>

初期設定の地図

設定されたマップと中心レベル（初期化モード）

VARマップ=新しいAMap.Map（ 'コンテナー'、{ズーム：11、中央：[120,30]}）。

地図を見るレベル/中央点

console.log（map.getZoom（））; // マップ、現在のレベルでのショー 
はconsole.log（map.getCenter（）のtoString（））; // ビューマップの現在の中心点

設定されたマップレベル/中心点（ユーザ対話）

 // マップレベル設定
 するvar jibie =のdocument.getElementById（ 'jibieを' ）;
  VAR queren =のdocument.getElementById（ 'queren' ）; 
 queren.onclick = 関数（）{ 
 map.setZoom（jibie.value）;    //はテキストを取得デジタルレベルのボックス内の 
 <DIV ID = "CC"> 
 <INPUTタイプ= "番号" ID = "jibie" /> 
 <ボタンタイプ= "ボタン" ID = "queren">確認</ボタン> 
 </ DIV> / / セット地図センタ 
のsetTimeout（関数（）{ 
map.setCenter（[ 122,33 ]）
}5000 ）// レベルとの中心点セット 
のsetTimeout（関数



（）{
map.setZoomAndCenter（11、[120,30 ]）
}、 5000）

地図イベント

// 移動トリガのローカルビュー 
map.on（ 'MoveEnd'、関数（）{}）   

// マップレベル変化トリガ後 
map.on（ 'zoomend'、関数（）{}）

現在の行政の中心点を見ます

VaRの CC =のdocument.getElementById（ 'CC' ）; 
map.on（ 'moveend'、関数（）{ 

map.getCity（関数（情報）{ 
cc.innerText = "地图中心位置为：" + info.province + '' + info.city + '' + info.district ; 
にconsole.log（情報）; 
}）

 <DIV ID = "CC"> 
12345 
</ div>

現在の行政の中心点を設定します

VAR QUE =のdocument.getElementById（ 'QUE' ）;
VAR diqu =のdocument.getElementById（ 'diqu' ）; 
que.onclick = 関数（）{ 
map.setCity（diqu.value）。

<DIV ID = "xingzheng"> 
の<input type = "text"の名= "" ID = "diqu" /> 
<ボタンID = "QUE">确认设置</ボタン> 
</ div>

レディ

マップを作成します。

初期設定の地図

おすすめ