前端 - 百度地图 API 基础入门

作者: MR_LIXP | 来源:发表于2017-02-20 14:04 被阅读2982次

请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。

1.前言

最近想完成一个网站，里面需要使用地图相关的内容。

经过多方考虑，决定使用百度地图来完成，所以将整个学习历程进行简单的整理，方便朋友们来快速入门。

本文系作者李鹏（MR_LP）原创，转载请私信并在文章开头附带作者和原文地址链接。

违者，作者保留追究权利。

2.获取密钥

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。

上述话术出自百度地图，我们从上面的描述中也可以了解到，我们在使用百度地图之前首先需要去注册一个属于自己的密钥。

申请密钥（ak）

打开该网站后，我们需要进行以下操作。

登录百度账号
创建应用

需要注意，我们当前只是进行一次测试，所以在白名单中直接书写一个星号即可（*）。
需要注意，创建的时候需要将 JavaScript API 选项进行勾选。

查看 AK

需要注意，请勿将这个 AK 展示给其他人，因为我这里只是给大家展示效果，所以就先不打码了。

3. 获取JavaScript API服务方法

截止作者开始书写之前，百度地图 API 的版本为 V 2.0。

我们在获取 API 之前需要首先完成注册 AK 才可成功加载API JS文件。

ak的使用方法如下：

//参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=1.4 

//使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密钥

其中需要注意：

JavaScript API v1.4及以前版本无须申请密钥（ak）。
如果在实际开发中，需要获取更高配额，请点击申请认证企业用户。

最后，关于在引入的时候，有可能出现权限验证失败。

具体导致这个问题的原因可能出自以下三种情况。

尚未在API控制台申请ak，即'...ak=';
密钥设置错误。
- 如E4805d16520de693a3fe707cdc962045为正确的ak
- 但是设置时输入的ak为E4805d16520de693a3fe707cdc962045xx;
密钥未通过白名单，如下图的ak在非baidu.com域名下会报错。
API控制台关闭JavaScript API时会报错;
错误的使用“服务端AK”用于 JavaScript API，JS API只支持浏览器类型的ak（自2016年1月15日升级）

最后附上进入百度地图 API javascript 的实例代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
      <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
    <!--使用V2.0版本的引用方式-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY&s=1" type="text/javascript" charset="utf-8"></script>
    <!--
        1. 如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
        https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；
        2. 对于Web API 无需加特殊字段，直接使用 HTTPS协议访问即可，如Geocoding：
        https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥
        &callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
        3. 如果对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露；
        
    -->
    
    <!--为了让页面以正常比例进行显示并且禁止用户缩放页面的操作-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
    
</body>
</html>

<!--
我的秘钥
    
应用编号    应用名称    访问应用（AK）                        应用类别        备注信息（双击更改）  应用配置
9290542 Test        bsNyezahIIgpUIjvYe51BKXzy1FXozUY        浏览器端                            设置 删除
    
-->

4. 关于百度地图 HTTPS 的说明

JavaScript API首家支持Https，已全面开放，无需申请Https服务可直接使用。

配置：

如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；
对于Web API 无需加特殊字段，直接使用 HTTPS协议访问即可，如Geocoding：
https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
如果对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露。

5. 百度地图的兼容性

浏览器：
- IE 6.0+
- Firefox 3.6+
- Opera 9.0+
- Safari 3.0+
- Chrome
操作系统：
- Windows
- Mac
- Linux
移动平台：
- iPhone
- Android

请各位开发者注意自己当前开发需要兼容的版本。

6. 第一个小案例

在开始之前，咱们首先通过一段实例代码进行效果的展示。

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>李鹏 -> QQ : 3206064928 (请勿非法转载)</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=bsNyezahIIgpUIjvYe51BKXzy1FXozUY">
//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> 
</body>  
<script type="text/javascript"> 
    /*
     创建地图实例  
     * 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。
     * 其参数可以是元素id也可以是元素对象。
     * 注意在调用此构造函数时应确保容器元素已经添加到地图上。*/
    var map = new BMap.Map("container");
    
    /*
     创建点坐标  
     * 这里我们使用BMap命名空间下的Point类来创建一个坐标点。
     * Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。*/
    var point = new BMap.Point(116.404, 39.915); 
    
    /*
     地图初始化
     * 在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 
     * 地图必须经过初始化才可以执行其他操作。*/
    map.centerAndZoom(point, 15);
    
    /*
     下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。
     * panTo()
     *      将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
     * zoomTo()
     * 
     * setCenter()
     * 
     * */
    window.setTimeout(function(){  
        map.panTo(new BMap.Point(116.450, 39.918));    
    }, 1000);
    
    /*
     默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，
     但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。
     配置选项可以在Map类参考的配置方法一节中找到。
     * */
</script>  
</html>

可以看到，我们如果需要使用百度地图，有至少三步操作需要完成。

创建地图实例
创建点坐标
地图初始化

在代码的最后段，放上一个方法，我们通过一个超时调用，在 1 秒之后，让地图进行平移。

需要注意一个小问题，如果跳转的点处于当前初始的地图的显示范围时，则地图会进行平移，否则就是重新绘制当前地图。

最后显示效果如下：

7. 百度地图控件

这时候我们发现，我们已经在当前页面实现了一个小的地图，但是我们却发现一个小问题。

为什么我的地图上空空一片呀。

这是因为我们还没有向百度地图中添加我们需要的控件。

地图API中提供的控件有：

Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

那么接下来我们就开始向地图中去添加控件。

7.1 添加控件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
      <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</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=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
</head>
<body>
    <div id="container"></div> 
</body>
<script type="text/javascript" charset="utf-8">
    /*
     向地图添加控件
     * 可以使用Map.addControl()方法向地图添加控件。
     * 在此之前地图需要进行初始化。
     * 例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：*/
    var map = new BMap.Map("container");    
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.addControl(new BMap.NavigationControl());
</script>
</html>

实现效果如下：

我们会发现，在我们的地图左上角出现了一个新的控件，我们可以通过这个控件去实现对地图的方法以及缩小。

除此之外，我们还可以添加其他地图控件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
      <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</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=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
</head>
<body>
    <div id="container"></div> 
</body>
<script type="text/javascript" charset="utf-8">
    /*
     向地图添加控件
     * 可以使用Map.addControl()方法向地图添加控件。
     * 在此之前地图需要进行初始化。
     * 例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：*/
    var map = new BMap.Map("container");    
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
//  map.addControl(new BMap.NavigationControl());
    /*
     可以向地图添加多个控件。
     在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。
     在地图中添加控件后，它们即刻生效。
     * */
    
    //地图平移缩放控件
    map.addControl(new BMap.NavigationControl());
    //比例尺控件
    map.addControl(new BMap.ScaleControl());    
    //缩略地图控件
    map.addControl(new BMap.OverviewMapControl());   
    //地图类型控件
    map.addControl(new BMap.MapTypeControl());    
    map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
</script>
</html>

可以看到，我们在原始的缩放控件之后去新增了三个新的控件。

实现效果如下：

除此之外，我们还可以设置地图空间所显示的位置和偏移。

7.2 控件的显示位置和偏移

ControlAnchor 此常量表示控件的定位。

常量	描述
BMAP_ANCHOR_TOP_LEFT	控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT	控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角

实例代码：

    //地图平移缩放控件
    map.addControl(new BMap.NavigationControl({
        anchor:BMAP_ANCHOR_TOP_RIGHT
    }));

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。

如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

var opts = {offset: new BMap.Size(150, 5)}    
map.addControl(new BMap.ScaleControl(opts));

同时，我们还可以修改控件的配置。

7.3 控件的显示方式

NavigationControlType此常量表示平移缩放控件的类型。

常量	描述
BMAP_NAVIGATION_CONTROL_LARGE	标准的平移缩放控件（包括平移、缩放按钮和滑块）
BMAP_NAVIGATION_CONTROL_SMALL	仅包含平移和缩放按钮
BMAP_NAVIGATION_CONTROL_PAN	仅包含平移按钮
BMAP_NAVIGATION_CONTROL_ZOOM	仅包含缩放按钮

实例代码：

    //地图平移缩放控件
    map.addControl(new BMap.NavigationControl({
        //仅包含平移按钮
        type:BMAP_NAVIGATION_CONTROL_PAN
    }));

7.4 关于百度地图控件的示例

最后放出一个关于百度定位相关控件的案例。

<!DOCTYPE html>
<html>
<head>
  <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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:100%;}
    p{margin-left:5px; font-size:14px;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
  <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
  <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  // 添加带有定位的导航控件
  var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  // 添加定位控件
  var geolocationControl = new BMap.GeolocationControl();
  geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  });
  geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
  });
  map.addControl(geolocationControl);
</script>

代码效果如下：

8. 后记

其实今天只是介绍了一下百度最基础的部分。

除此之外，百度地图还可以去使用其他的特殊操作。

覆盖物
事件
地图图层
工具
服务
用户数据图层
全景图展现
定制个性地图

最后感谢百度地图的开发工程师。

转载请于文章开头处注明作者和原文链接，否则保留法律追究权利。

附录：

A ：鼠标滚轮缩放地图

<html>
<head>
    <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:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
    <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");            
    map.centerAndZoom("重庆",12);                
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
</script>

实现效果：

B : 查询显示位置

<!DOCTYPE html>
<html>
<head>
    <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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
    <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
        ,"location" : map
    });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>

代码效果：

C ：根据经纬度确定位置

<html>
<head>
    <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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{height:500px;width:100%;}
        #r-result{width:100%; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
    <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="r-result">
        经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
        纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
        <input type="button" value="查询" onclick="theLocation()" />
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
    map.enableScrollWheelZoom(true);
    
    // 用经纬度设置地图中心点
    function theLocation(){
        if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
            map.clearOverlays(); 
            var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);      
        }
    }
</script>

实现效果：

前端 - 百度地图 API 基础入门

1.前言

2.获取密钥

3. 获取JavaScript API服务方法

4. 关于百度地图 HTTPS 的说明

5. 百度地图的兼容性

6. 第一个小案例

7. 百度地图控件

7.1 添加控件

7.2 控件的显示位置和偏移

7.3 控件的显示方式

7.4 关于百度地图控件的示例

8. 后记

附录：

A ：鼠标滚轮缩放地图

B : 查询显示位置

C ：根据经纬度确定位置

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web 前端

H5技术栈

前端学习

租房

API

地图应用API（GIS+LBS）

百度地图应用

Web前端之路

前端 - 百度地图 API 基础入门

1.前言

2.获取密钥

3. 获取JavaScript API服务方法

4. 关于 百度地图 HTTPS 的说明

5. 百度地图的兼容性

6. 第一个小案例

7. 百度地图控件

7.1 添加控件

7.2 控件的显示位置和偏移

7.3 控件的显示方式

7.4 关于百度地图控件的示例

8. 后记

附录：

A ： 鼠标滚轮缩放地图

B : 查询显示位置

C ： 根据经纬度确定位置

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

4. 关于百度地图 HTTPS 的说明

A ：鼠标滚轮缩放地图

C ：根据经纬度确定位置