百度地图 API 基础入门——前端（一）

最新推荐文章于 2024-05-11 14:40:49 发布

AndroidCC

最新推荐文章于 2024-05-11 14:40:49 发布

阅读量799

点赞数

分类专栏：前端学习文章标签： javascript 百度地图

本文链接：https://blog.csdn.net/AndroidCC/article/details/77483434

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、获取密钥（AK）

*申请AK

1、登录百度账号

2、创建应用

3、查看 AK

注：由于AK不能展示给其他人看，所以我这里就打码了。

二、获取JavaScript API服务方法

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙">
    //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
 </script>

注：这一段代码要写在<head>...</head>里面，并且要换上你的AK

三、第一个小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMap.Map("container");          // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());  //地图平移缩放控件
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("北京");
</script>
</body>
</html>

四、第二个案例（标记位置）

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #allmap{width: 100%;height: 100%;margin:0;height: 300px}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(114.054893,22.553926);
    map.centerAndZoom(point,20);

    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint("深圳市福田区第一世界广场", function(point){
        if (point) {
            var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}
            map.addControl(new BMap.NavigationControl(opts));//地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
            map.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
            map.addControl(new BMap.MapTypeControl());//地图类型控件，默认位于地图右上方。
            map.centerAndZoom(point, 20);
            var marker =new BMap.Marker(point);
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            var optss = {
                width : 240,     // 信息窗口宽度
                height: 70,     // 信息窗口高度
                title : "第一世界广场" , // 信息窗口标题
                enableMessage:true,//设置允许信息窗发送短息
            }
            var infoWindow = new BMap.InfoWindow("地址：深圳市福田区第一世界广场", optss);  // 创建信息窗口对象
            marker.addEventListener("click", function(){
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            });

            setTimeout(function () {
                map.setZoom(20);
            },2000);
            map.enableScrollWheelZoom(true);

        }else{
            alert("您选择地址没有解析到结果!");
        }
    }, "深圳市");

</script>

效果图：

AndroidCC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图 API 基础入门——前端（一）

一、获取密钥（AK）*申请AK1、登录百度账号2、创建应用3、查看 AK注：由于AK不能展示给其他人看，所以我这里就打码了。二、获取JavaScript API服务方法 //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" //v1.4版本及以前版本的
复制链接

扫一扫

专栏目录