ホームページ > 記事 > ウェブフロントエンド > 最新のAmap API WEB開発事例チュートリアル
最新のAmap API WEB開発事例チュートリアル
- 零下一度オリジナル
- 2018-05-28 17:32:0313356ブラウズ
フロントエンドにかかる時間は、会社が Baidu のチュートリアルを勉強する必要があるためです
その後、一時的な執筆熱を満たすために、簡単なメモを書き、学習の成果を記録します
Amap WEB 開発 (主要なアプリケーション、API )簡単なチュートリアル
1. まず、「Baidu 検索」または「Google 検索」を通じて「Amap 開発プラットフォーム」にアクセスする必要があります
すると、Amap 開発プラットフォームが表示されます
2. Amap 開発プラットフォームにログインします
これは Amap 開発プラットフォームの公式 Web サイトです。クリックしてログインします。登録はしないでください
3. Enterコンソールで新しいアプリケーションを作成します
コンソールに入ったら、[アプリケーション管理]を選択し、クリックして新しいアプリケーションを作成します
アプリケーションの名前と種類は次のとおりです。実際の状況により適したものを作成します
作成 その後、新しいアプリケーションが表示されるので、[キーの追加]をクリックします
ここでキー名を入力した後、サービスプラットフォームを選択します。携帯電話、Android/iOS、そしてWebをやっているので「Web側」を選択しました
サービスプラットフォームごとに利用できるサービスが異なるので注意してください
そして送信をクリックすると、キー
4. キーの使用法と API の使用
キーを入手したので、Amap の使用方法は、もちろんその API に依存します
開発ドキュメント Web を通じて確認できます。ホームページの「開発とサポート」にある JavaScript API
慣れていない場合、または方法がわからない場合は、これが比較的包括的な API ページです。それを呼び出して、その例を直接見て、コードを使用してそれを呼び出す方法を示しましょう
メニューの「開発とサポート」の例と経験
は、ここで非常に明確です。もちろん、これは部分的なデモにすぎません。詳細は API にアクセスして確認してください。ここでは、マップの基本的な使い方とさまざまな関数の呼び出しを紹介します。
5. GaodeマップAPIの使い方
使用方法を簡単に紹介します
1. Gaodeマップjsとcss 呼び出しの4行目に必要なキーは、アプリケーションを追加して取得したキーです。すぐ上1 <title>基本地图展示</title>
2 <link rel="stylesheet" href="
3 <script src="
4 <script src="
5 <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
2. 地図を開始するためのAmap jsのインスタンス化
1 var map = new AMap.Map('container', {
2 resizeEnable: true,
3 zoom:11,
4 center: [116.397428, 39.90923]
5 });3. 完全な基本的な地図表示(コードはAmap AIからのもの)
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7 <title>基本地图展示</title>
8 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/>
9 <script src="http://cache.amap.com/lbs/static/es5.min.js?1.1.11"></script>
10 <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
11 <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
12 </head>
13 <body>
14 <p id="container"></p>
15
16 <script>
17 var map = new AMap.Map('container', {
18 resizeEnable: true,
19 zoom:11,
20 center: [116.397428, 39.90923]
21 });
22
23 </script>
24 </body>
25 </html>4. 運転ルートの計画(出発点に基づく)および終点)
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7 <title>关键字检索</title>
8 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/>
9 <style type="text/css">
10 #panel {
11 position: absolute;
12 background-color: white;
13 max-height: 90%;
14 overflow-y: auto;
15 top: 10px;
16 right: 10px;
17 width: 280px;
18 }
19 </style>
20 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
21 <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
22 </head>
23 <body>
24 <p id="container"></p>
25 <p id="panel"></p>
26 <script type="text/javascript">
27 var map = new AMap.Map("container", {
28 resizeEnable: true
29 });
30 AMap.service(["AMap.PlaceSearch"], function() {
31 var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
32 pageSize: 5,
33 pageIndex: 1,
34 city: "010", //城市
35 map: map,
36 panel: "panel"
37 });
38 //关键字查询
39 placeSearch.search('北京大学');
40 });
41 </script>
42 </body>43 </html>6. リアルタイム交通状況
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7 <title>按起终点经纬度规划路线</title>
8 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css?1.1.11"/>
9 <style type="text/css">
10 #panel {
11 position: fixed;
12 background-color: white;
13 max-height: 90%;
14 overflow-y: auto;
15 top: 10px;
16 right: 10px;
17 width: 280px;
18 }
19 </style>
20 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Driving"></script>
21 <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js?1.1.11"></script>
22 </head>
23 <body>
24 <p id="container"></p>
25 <p id="panel"></p>
26 <script type="text/javascript">
27 //基本地图加载
28 var map = new AMap.Map("container", {
29 resizeEnable: true,
30 center: [116.397428, 39.90923],//地图中心点
31 zoom: 13 //地图显示的缩放级别
32 });
33 //构造路线导航类
34 var driving = new AMap.Driving({
35 map: map,
36 panel: "panel"
37 });
38 // 根据起终点经纬度规划驾车导航路线
39 driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));
40 </script>
41 </body>
42 </html>7. 3D フロア
1 <body>
2 <p id="container"></p>
3 <p class="button-group">
4 <input type="button" class="button" id="control" value="显示/隐藏实时路况"/>
5 </p>
6 <script>
7 var map = new AMap.Map('container', {
8 resizeEnable: true,
9 center: [116.397428, 39.90923],
10 zoom: 13
11 });
12 //实时路况图层
13 var trafficLayer = new AMap.TileLayer.Traffic({
14 zIndex: 10
15 });
16 trafficLayer.setMap(map);
17
18 var isVisible = true;
19 AMap.event.addDomListener(document.getElementById('control'), 'click', function() {
20 if (isVisible) {
21 trafficLayer.hide();
22 isVisible = false;
23 } else {
24 trafficLayer.show();
25 isVisible = true;
26 }
27 }, false);
28 </script>
29 </body>他にもたくさんの機能がありますが、ここでは 1 つずつ説明しません。 Amap 開発プラットフォームで確認できます
以上が最新のAmap API WEB開発事例チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。