如何获取百度地图API的密钥以及调用百度地图api

原文链接：https://jingyan.baidu.com/article/4b52d702902cb5fc5c774b38.html

     https://blog.csdn.net/qq_45956730/article/details/124528420

image

 

image

 

image

 

image

 

image

 

image

 

image

 新建一个map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度地图</title>
    <style>
        #container{
            width:1200px;
            height:400px;
            border:1px solid #999;
        }
    </style>
    <!--引用百度地图API文件-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=密钥"></script>
</head>
<body>
    <div id="container">
 
    </div>
    <script>
        // 创建地图实例
        var map = new BMap.Map("container");
        // 设置中心点坐标
        var point = new BMap.Point(116.404, 39.915);
        // 地图初始化，同时设置地图展示级别
        map.centerAndZoom(point, 15);
    </script>
</body>
</html>

　　浏览器打开效果：

ff2728fc0e1a5fb759786215e46de60d_90f37e1051ac02ed7a4fa5366a6fa829

 为百度地图添加多个控件

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

　　浏览器打开效果：

image

 

更改图标：

// 更改图标,通过Icon类可实现自定义标注的图标
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25));
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);

　　

地址解析器：

// 地址解析器
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint("北京市海淀区清华园赛尔大厦", function(point){
    if (point) {
        map.centerAndZoom(point, 16);
        map.addOverlay(new BMap.Marker(point));
    }
    },
    "北京市");

　　

image

 

添加监听事件：

// 添加监听事件
var opts = {    // 提供信息窗口
    width : 250,     // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title : "信息窗口标题 "  // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
// 点击标注，打开窗口信息
marker.addEventListener("click", function(){
    map.openInfoWindow(infoWindow, map.getCenter());      // 默认在地图的正中心打开信息窗口
});

　　浏览器页面效果：

image

 

posted @ 2025-10-16 15:40  yinghualeihenmei  阅读(19)  评论(0)    收藏  举报