百度地图API的使用教程以及案例

拼搏现实的明天。 2022-10-10 12:32 145阅读 0赞

## 百度地图API的使用教程以及案例 ##

## 一、注册 ##

百度地图：掌握当前的位置在网页显示位置，插入地图 拖拽，点击事件。

注意：定位 距离 公交 不关心

**官网：[ 点我进入百度地图官网][Link 1]**

应用场景：网页插入百度地图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 4]

## 二、获取账号和密钥 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 6]

## 三、插入地图 ##

##  ##

**创建地图容器元素 设置大小**

#container { 
                width: 1300px;
                height: 600px;
                border: 1px solid #999;
            }

**引用百度地图API文件**

**创建地图实例**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 8]

## 四、添加控件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 9]

**效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 10]  
**代码如下：**

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { 
                width: 1300px;
                height: 600px;
                border: 1px solid #999;
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi"></script>
    </head>
    
    <body>
        <div id="container"></div>
    
        <script>
            //1.创建地图实例
            var map = new BMap.Map("container");
    
            //2.设置中心点坐标  BMap命名空间下的Point类来创建一个坐标点
            var point = new BMap.Point(116.404, 39.915);
    
            //3.地图初始化，同时设置地图展示级别  (3-19)
            map.centerAndZoom(point, 15);
    
            //4.鼠标滚轮  开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    
            //5.添加控件
            //平移缩放控件 NavigationControl   PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能
            map.addControl(new BMap.NavigationControl());
    
    
            //比例尺 ScaleControl 默认位于地图左下方，显示地图的比例关系
            map.addControl(new BMap.ScaleControl());
    
            //缩略地图 OverviewMapControl	默认位于地图右下方，是一个可折叠的缩略地图
            map.addControl(new BMap.OverviewMapControl());
    
            //地图类型	MapTypeControl	默认位于地图右上方
            map.addControl(new BMap.MapTypeControl()); var opts = { 
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                type: BMAP_NAVIGATION_CONTROL_SMALL //类型
            }
            map.addControl(new BMap.NavigationControl(opts));
    
    
        </script>
    
    </body>
    
    </html>

## 五、标注 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 12]  
**代码如下**

<!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> #container { 
                width: 1300px;
                height: 600px;
                border: 1px solid #999;
            }
        </style>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=gGU58LULTYYEvYcqn8IQ5ZaEsqtaa1pj"></script>
    </head>
    
    <body>
        <div id="container"></div>
        <script>
            // 创建地图实例
            var map = new BMapGL.Map("container");
    
            //设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点
            var point = new BMapGL.Point(116.404, 39.915);
    
            //地图初始化 同时设置地图的级别(3-19)
            map.centerAndZoom(point, 15);
    
            //鼠标滚轮 开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
    
            //添加标注
            var marker = new BMapGL.Marker(point);
            map.addOverlay(marker); // 将标注添加到地图中 //添加监听事件 marker.addEventListener("click", function() { 
                alert("您点击了标注");
            });
        </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 13]

## 也可以自定义标注图标 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 15]

## 六、 信息窗口 ##

**效果如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 17]

**代码如下**

//InfoWindow信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息
            //注意：同一时刻只能有一个信息窗口在地图上打开
            var opts = { 
                    width: 250, // 信息窗口宽度
                    height: 100, // 信息窗口高度
                    title: "Hello World" // 信息窗口标题
                }
                // 创建信息窗口对象
            var infoWindow = new BMapGL.InfoWindow("你好 世界", opts);
    
            // 打开信息窗口 地图的中心位置map.getCenter() 
            // map.openInfoWindow(infoWindow, map.getCenter());
            map.openInfoWindow(infoWindow, point)
    
    
            //点击marker标注——打开信息窗口
            marker.addEventListener('click', function() { 
                map.openInfoWindow(infoWindow, point);
            })

## 七、正/逆地址解析 ##

// 地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。
            var myGeo = new BMapGL.Geocoder();
            // 将地址解析结果显示在地图上，并调整地图视野
            myGeo.getPoint('湖南省长沙市岳麓区岳麓书院', function(point) { 
                if (point) { 
                    map.centerAndZoom(point, 16);
                    map.addOverlay(new BMapGL.Marker(point, { 
                        title: '湖南省长沙市岳麓区'
                    }))
                } else { 
                    alert('您选择的地址没有解析到结果！');
                }
            }, '湖南省');

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 20]

[Link 1]: http://lbsyun.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20221005/9b988ecf24d140298199e92a5b8473ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20221005/61c96b1576ff4cde9b8dc48dcc7ac455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]: /images/20221005/1a2704eb158b45278304768b599ea4d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]: /images/20221005/9fc3ac7b22a84173b722dcf5f0b47625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 4]: /images/20221005/8ecef5dd2f81428d9c475077e5af6ed4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 5]: /images/20221005/6b43b4fee87d4294be263c815fdc4dfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 6]: /images/20221005/60550e33828849df86d9ef1b03f21bfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 7]: /images/20221005/ea95b0f6491b434a9a436928cd6ace6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 8]: /images/20221005/18fc65fad3dd48eebd01190d8ff8d319.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 9]: /images/20221005/2fb823991d434098b5c558152a4995fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 10]: /images/20221005/2da1b0c48b984ba285501952e3976c47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 11]: /images/20221005/30840fa7397441ce8b5bf75f779a0610.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 12]: /images/20221005/abee929a0b834df9a7c37833f465329b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 13]: /images/20221005/f51eb0e97ff14f839c13b3f6c072a9c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 14]: /images/20221005/ab17af04e0d9411796b68c86271a18a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 15]: /images/20221005/1de34662a5924846bbcf7d610f545304.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 16]: /images/20221005/519858e2b4484c1eab976fd23669810f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 17]: /images/20221005/00bd5ee733f44c6c954a17e343711069.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 18]: /images/20221005/6f0c881a28fa4864923a18362a9a6908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 19]: /images/20221005/52104c6af7ba48fca5a5752b8f567bd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 20]: /images/20221005/1c8f062e14f74641afdb044f52330023.png