Baidu マップ開発者アカウントアプリケーション

この記事の効果

1.百度地図開発者アカウントアプリケーション

公式ウェブサイト: Baidu Map Open Platform | Baidu Map API SDK | 地図開発 (baidu.com)

一般に、Baidu Cloud を使用したことがある場合は、Baidu アカウントを持っていることになります。

[コンソール] - [私は個人的な愛好家/学生です] をクリックします。

個人情報の改善 - 実名認証

再度ホームページに戻り、メニューバーの「コンソール」をクリックします。

このインターフェイスが表示されれば、登録が成功したことを意味します。

2. アプリケーションを作成する

1. [アプリケーション管理]--[マイアプリ]--[アプリの作成]をクリックします（図の青/緑の文字の手順に従ってください）

2. [送信]をクリックします。

3. 正常に作成されました。(ここでの AK コードは非常に重要であり、後の開発で使用されます。)

3. Baidu Maps API を見つける

1. ホームページのメニューバーの[開発ドキュメント]-[JavaScript API]をクリックします。

2.【HelloWorld】をクリック

3. [百度地図 API ファイルを参照] を見つけて API をコピーします

4. アプリケーションが正常に作成されたら、[キー] を (ステップ 2 の最後のステップ) 'AK コード' に変更します。

4. 開発手順

完全なコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  2.设置尺寸  */
        .map {
        width: 1000px; /*任意大小*/
        height: 600px;
        border: 1px solid red;
        }
    </style>
    <!-- 3.引入百度地图api 最好在head引入 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=此处输入你自己的百度地图AK码">
    </script>
</head>
<body>

    <!-- 1.创建容器 => 容器必须得有尺寸 没有尺寸无法显示地图效果 -->
    <div class="map"></div>
    
</body>
<script>
// <!-- 4.创建地图实例 -->

// 1)获得节点 
    let mapSelector = document.querySelector(".map");

// <!-- 2)借用百度地图api创建一个地图实例；参数是'节点'或者'id值' -->
    let map = new BMapGL.Map(mapSelector);

// <!-- 3)借用百度地图api创建一个定位点 (以成都大鼎世纪广场定位点经纬度为例) -->
    let point = new BMapGL.Point(104.07489829924052, 30.60746989778522);

// <!-- 4)初始化地图；参数1是定位点； 参数2是地图级别； 1-19：1范围最大 细节最弱， 19范围最小 细节最强 -->
    map.centerAndZoom(point,19)
</script>
</html>

最終効果