百度地图开发入门（1）：案例

作者：菜鸟追梦旅行 | 2024-05-04 23:12:38

踩

百度地图开发入门（1）：案例

将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式

1. 百度开发者账户申请

具体可以参考这里：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

最后当你的应用创建好了，就会得到一个服务密钥

然后这里是百度地图的API：https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html

2. 实际案例

第一步是需要显示出地图，这里我们使用html原生方式来讲解

<!DOCTYPE html>

<html>



<head>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

    <style>

        html,

        body,

        #map {

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

        /* 隐藏百度的下面log和版权声明 */

        .anchrolBL, BMap_cpyCtrl {

            display: none;

        }

    </style>

</head>



<body>

    <div id="map"></div>

    <script>

        // 地图对象初始化

        let map = new BMapGL.Map('map');

        // 地图中心坐标 - 后续地图绘制都需要这种坐标

        let point = new BMapGL.Point(116.404,39.915);

        // 可以展示地图了

        map.centerAndZoom(point, 10);

        // 允许鼠标滚轮滚动放大缩小

        map.enableScrollWheelZoom(true);



    </script>

</body>



</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

以上代码就拿展示出百度地图了

3. 异步加载地图

通常我们需要对一些首屏渲染速度敏感应用进行地图的异步加载：


<!DOCTYPE html>

<html>



<head>

    <!-- 初始加载map的js会影响首屏速度 -->

    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script> -->

    <style>

        html,

        body,

        #map {

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }



        /* 隐藏百度的下面log和版权声明 */

        .anchrolBL,

        BMap_cpyCtrl {

            display: none;

        }

    </style>

</head>



<body>

    <div id="map"></div>

    <script>

        function init() {

            // 地图对象初始化

            let map = new BMapGL.Map('map');

            // 地图中心坐标 - 后续地图绘制都需要这种坐标

            let point = new BMapGL.Point(116.404, 39.915);

            // 可以展示地图了

            map.centerAndZoom(point, 10);

            // 允许鼠标滚轮滚动放大缩小

            map.enableScrollWheelZoom(true);

        }

        // 页面所有资源加载完成之后回调

        window.onload = function () {

            let script = document.createElement('script');

            // 结尾url添加callback，这样加载完成之后会调用我们的init方法

            script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥&callback=init';

            document.body.append(script);

        }



    </script>

</body>



</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

主要是不要在初始化时加载map的js，而是在onload回调中进行加载，同时借助url的callback来调用我们封装的init方法

4. 3D地图

3D地图能够很方便的展示园区和学校等建筑，还可以通过旋转角，俯角来更好的进行展示的效果

<!DOCTYPE html>

<html>



<head>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

    <style>

        html,

        body,

        #map {

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

        /* 隐藏百度的下面log和版权声明 */

        .anchrolBL, BMap_cpyCtrl {

            display: none;

        }

    </style>

</head>



<body>

    <div id="map"></div>

    <script>

        // 地图对象初始化

        let map = new BMapGL.Map('map');

        // 地图中心坐标 - 后续地图绘制都需要这种坐标

        // 百度有坐标拾取器，可以获取地点的坐标

        let point = new BMapGL.Point(116.404,39.915);

        // 可以展示地图了,第二个参数zoom

        map.centerAndZoom(point, 10);

        // 允许鼠标滚轮滚动放大缩小

        map.enableScrollWheelZoom(true);

        // 设置旋转角和俯角，可以看到3D效果

        let heading = 0;

        map.setHeading(heading);

        map.setTilt(30);

        // 动画-自动旋转 -- 不流畅的动画，官方也不推荐，后续会讲解其他方案

        setInterval(() => {

            heading++;

            map.setHeading(heading);

        },500)





    </script>

</body>



</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

5. 3D地球

// 出现3D地球 - 卫星图

        // 同样也可以配置旋转和俯角

        map.setMapType(BMAP_EARTH_MAP);
1
2
3
4
5

其他地图类型可以看这里：

https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a4b0

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/536534