百度地图API

最新推荐文章于 2024-05-09 08:57:58 发布

转载最新推荐文章于 2024-05-09 08:57:58 发布 · 1.6k 阅读

文章标签：

#百度地图 #api

其他专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用百度地图API创建地图应用，包括申请密钥、实现地图展示、添加标记和文字标注等基本操作，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一篇学习笔记
转载自：http://blog.youkuaiyun.com/a153375250/article/details/51459191

百度地图的应用步骤：

第一步：进入百度地图 http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5（需要先登录百度账号）

第二步：申请密钥
这里写图片描述

注意：没有注册【百度地图开放平台】开发者平台可能需要注册一下，按步骤填写信息就可以

这里写图片描述

注意：访问应用(AK)就是密钥

第三步：代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>百度地图应用</title>
        <style type="text/css">
            body, html,#baiduMap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <!-- baiduMap api -->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
    </head>
    <body>
        <div id="baiduMap"></div>  
        <!-- baiduMap -->
        <script type="text/javascript">
        // 百度地图API功能
        //启用百度地图
        var map = new BMap.Map("baiduMap"); //创建一个map实例
        var point = new BMap.Point(106.55267,29.566315); //设置显示地点的坐标
        map.centerAndZoom(point, 16); //设置地图中心点及缩放级别
        //创建标注
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        //添加文字
        var label = new BMap.Label("太平洋广场A座", {offset:new BMap.Size(25,-25)});  // 创建文本标注对象
        label.setStyle({
             color : "black",
             fontSize : "12px",
             height : "15px",
             lineHeight : "15px",
             fontFamily:"微软雅黑",
             borderColor: "gray",
             borderRadius:"2px",
             padding:"5px"
        });
        marker.setLabel(label);
        //设置点的弹跳动画
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        //地图缩放
        setTimeout(function(){
            map.setZoom(14);   
        }, 2000);  //2秒后放大到14级
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        </script>
    </body>
</html>