百度地图 API 使用总结

最新推荐文章于 2024-06-21 17:06:14 发布

mjzhang1993

最新推荐文章于 2024-06-21 17:06:14 发布

阅读量1.3w

点赞数 9

分类专栏：其他分类文章标签：百度地图 react 覆盖物控件标记

本文链接：https://blog.csdn.net/mjzhang1993/article/details/53742565

版权

其他分类专栏收录该内容

14 篇文章 0 订阅

订阅专栏

百度地图API学习总结（一）

说明

公司项目需要一些关于定位和路线规划的功能，需要在网页中嵌入百度地图，这里主要是做一个记录，记录在开发应用中使用过的API，以便以后查询。

官方文档及参考指南下载

百度地图的官方文档写的很详细，但是内容非常多，并且很多是暂时用不到的，看起来稍微有一些麻烦，但是当你需要查找某些功能时，官方文档又是必不可少的

1.首先进入百度地图开放平台

2.找到开发选项，选择合适的平台，我选的Web开发——JavaScript API

3.根据说明，需要先申请秘钥才可以使用

4.然后回到之前的页面，左侧导航，有开发所需的所有资源，包括示例，示例相对来说比较重要，因为对新手来讲，示例对功能体现的更为直接，我一般都是看着示例结合着文档来编写代码的。

5.最后就是关键的文档了，在左侧导航的最下边相关下载中下载最新版本的文档，《开发指南文档》主要是一些入门的介绍和功能的举例，《类参考文档》是API的详细使用指南

开发流程

1.首先获取服务，获取秘钥后，在HTML中引入，如下：

<script src="http://api.map.baidu.com/api?v=2.0&ak=yourAppKey" type="text/javascript"></script>

将秘钥yourAppKey替换成你自己的即可

2.定义一个容器，地图会在定义的容器中显示，这个容器要有确定的宽高,如果是移动端还需要加上meta标签<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>标题</title>
        <link rel="stylesheet" href="./css/app.css">
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAppKey"></script>
    </head>

    <body>
        <div id="app"></div>   //容器
        <script>
            // 代码
        </script>
    </body>

    </html>

3.命名空间
API 使用 BMap 作为命名空间，所有类都在命名空间之下，也就是说无论是创建地图，还是创建一个覆盖物或者控件，都需要使用 BMap.[类]，下边是一个简易的地图实例(在上边代码的<script></script>标签中实现)

    <body>
        <div id="app"></div>   //容器
        <script>
            // 代码
            var map = new BMap.Map("app"); //以#app为容器创建地图实例
            var point = new BMap.Point(116.404,39.915); //创建一个点，参数为点的坐标
            map.centerAndZoom(point,15); //初始化地图，需要传入，中心点和缩放级别
        </script>
    </body>

常用API介绍

1.Map 地图类

Map 是地图 API 的核心类，用来实例化一个地图
通过new BMap.Map(container);来创建，之后需要调用centerAndZoom(point,zoom)方法对地图进行初始化，否则进行不了任何操作

map.getCenter()、map.setCenter(center:Point|String)

获取当前中心点坐标 map.getCenter()得到的是一个 point 对象、设置当前中心点坐标

map.getDistance(start:Point,end:point)

返回两点间距离，需要两个点的point

map.getZoom() 、 map.setZoom(zoom)

返回当前地图的缩放比、设定地图的缩放比

map.centerAndZoom(point,zoom)

用于初始化地图，设置初始化时的中心点及缩放级别

map.panTo(point)

修改地图的中心点，并且移动过去

reset()

重置地图，恢复地图初始化时的中心点和级别

addControl(control:Control)、removeControl(control:Control)

向地图中添加控件、从地图中移除控件

getContainer()

获取地图的容器元素

addOverlay(overlay:Overlay)、removeOverlay(overlay:Overlay)

向地图中添加覆盖物、从地图中移除覆盖物

clearOverlays()

清除地图上所有覆盖物

getOverlays()

获取地图上所有的覆盖物

2.Point 坐标点类

表示地图上的一个坐标点var point = new BMap.Point(lng,lat) lng:经度 lat:纬度

equals(other:Point)

用于判断坐标点是否相等

    let point = new BMap.Point(116.331398, 39.897445),
        point1 = new BMap.Point(116.331398, 39.897445),
        point2 = new BMap.Point(115.331398, 39.897445);

    console.log(point.equals(point1)); //true
    console.log(point.equals(point2)); //false

3.Size 大小类

表示一个矩形区域的大小(单位是像素)，常用来限定控件，或者覆盖物的大小

let size = new BMap.Size(20,30);
   console.log(size); //{width: 20, height: 30}

4.Control 控件类

所有控件的基类，一般用来实现自定义控件

defaultAnchor

指定控件默认停靠位置、可以取值如下：

BMAP_ANCHOR_TOP_LEFT | BMAP_ANCHOR_TOP_RIGHT
BMAP_ANCHOR_BOTTOM_LEFT | BMAP_ANCHOR_BOTTOM_RIGHT

defaultOffset

控件默认位置的偏移值

this.defaultOffset = new BMap.Size(rem * 0.16, rem * 0.2);

initialize(map:Map)

实现控件初始化时调用，（使用方法见后边案例）

setAnchor()、getAnchor()

设置控件停靠的位置 | 返回控件停靠的位置。

setOffset()、getOffset()

设置控件停靠的偏移量 | 返回控件停靠的偏移量

show()、hide()、isVisible()

显示控件 | 隐藏控件 | 判断控件是否可见

下边是一个自定义控件的实例：

    // 定义一个控件类，功能是刷新
    function RefreshControl() {
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
        this.defaultOffset = new BMap.Size(rem * 0.16, rem * 0.2);
    }
    // 继承BMap.Control
    RefreshControl.prototype = new BMap.Control();
    // 初始化自定义控件，传入所在的地图
    RefreshControl.prototype.initialize = function(map) {
        // 创建一个DOM元素
        var div = document.createElement("div");
        div.className = 'baidumap-refresh';
        div.onclick = function(e) {
            e.stopPropagation();
            map.reset(); // 重置地图，恢复初始化时的中心点和缩放级别

        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };
    // 创建控件
    var myRefreshControl = new RefreshControl();
    // 添加到地图中
    map.addControl(myRefreshControl);

5.Overlay 覆盖物类

show()、hide()、isVisible()

显示覆盖物、隐藏覆盖物、判断覆盖物是否可见

百度地图提供的覆盖物比较好用，很少情况会自定义覆盖物

6.Marker 图像标注

通过：new BMap.Marker(point, opts);创建，Marker 是我使用比较多的 API，它的配置和使用方法都比较多，如果在这里找不到想要的功能可以到官方文档上找找

setIcon(icon:Icon)、getIcon()

设置标注所用的图标对象、返回标注所有的标注对象

setPosition(position:Point)、getPosition()

设置标注的地理坐标、返回标注的地理坐标

setOffset(offset:Size)、getOffset()

设置标注的偏移值、返回标注的偏移值

setLabel(label:Label)、getLabel()

为标注添加文标注、返回标注的文本标注

setTitle(title:String)、getTitle()

设置标注的标题,当鼠标移至标注上时显示此标题、返回标注的标题

enableDragging()、disableDragging()

开启标注拖拽功能、关闭标注拖拽功能

enableMassClear()、disableMassClear()

允许覆盖物在 map.clearOverlays方法中被清除、禁止覆盖物在 map.clearOverlays 方法中被清除

openInfoWindow(infoWnd:InfoWindow)、closeInfoWindow()

打开信息窗、关闭信息窗

下边是一个Marker的实例

    let myIcon = new BMap.Icon('../../../img/iconset.png', new BMap.Size(128, 128), {
        anchor: new BMap.Size(64, 64), //
        imageOffset : new BMap.Size(-316,0)
    });
    // 创建标注对象并添加到地图,刷新的时候不删除
    let marker = new BMap.Marker(point, { //第二个参数opts就写在{}内
        icon: myIcon,
        enableMassClear: false
    });
    marker.addEventListener('click', function(e) {
        e.domEvent.stopPropagation();  //覆盖物等百度地图的元素阻止默认事件和事件冒泡用domEvent
        console.log('当前位置');
    });
    map.addOverlay(marker); //添加覆盖物

点击marker后从marker中获取文本信息的方法，如下：

    //伪代码
    marker.addEventListener('click', function(e) {
        e.domEvent.stopPropagation();
        // 将其他图标变小，点击的图标变大
        map.panTo(e.target.point);  // 以当前点击的点为中心点
        let allOverlay = map.getOverlays(); // 获取所有覆盖物
        let IdNow = e.target.getLabel().content.match(/id=\d{4}/)[0].substr(3);
        // 通过 e.target.getLabel() 得到 绑定在 marker 上的 label,通过label.content 得到 文本内容 
        for (let i = 1; i < allOverlay.length; i++) {
            // 下边这个判断，是为了过滤出 包含label的marker标注
            if (allOverlay[i].toString() == "[object Marker]" && allOverlay[i].getLabel() !== null) {  
                let tempContent = allOverlay[i].getLabel().content;
                let tempId = tempContent.match(/id=\d{4}/)[0].substr(3);

                if (tempId != IdNow) {
                   allOverlay[i].setIcon(smallIcon); // 其他标注变小
                }else{
                    allOverlay[i].setIcon(hugeIcon); // 点击的标注变大
                }
            }
        }
    });

7.Icon 图标

多用于给覆盖物，定义的显示图标Icon(url:String, size:Size[opts:IconOptions])

1.属性

anchor

图标的定位点相对于图标左上角的偏移值

size

图标可视区域的大小

imageOffset

等同于 CSS 中的 background-position 属性，用来处理雪碧图

imageUrl

图片路径

infoWindowAnchor

信息窗口开启位置相对于图标左上角的偏移值

2.方法

setImageUrl(imageUrl:String)

设置图片资源的地址

setSize(size:Size)

设置图标可视区域的大小

setAnchor(anchor:Size)

设置图标定位点相对于其左上角的偏移值

8.Label 文本标注类

通过Label(content:String[,opts:LabelOptions])创建，不仅可以直接添加到地图上，还可以添加到Marker上

setStyle(styles:Object)

设置文本标注样式

setContent(content:String)

设置文本标注的内容。支持 HTML

setPosition(position:Point)、getPosition()

设置文本标注坐标。仅当通过 Map.addOverlay()方法添加的文本标注有效、获取位置坐标

setOffset(offset:Size)、getOffset()

设置文本标注的偏移值、返回文本标注的偏移值

setTitle(title:String)、getTitle()

设置文本标注的标题,当鼠标移至标注上时显示此标题、返回文本标注的标题

enableMassClear()、disableMassClear()

允许覆盖物在 map.clearOverlays方法中被清除、禁止覆盖物在 map.clearOverlays 方法中被清除

    let myIcon= new BMap.Icon('../../../img/iconset.png', new BMap.Size(96, 124), {
       anchor: new BMap.Size(48, 120),
       imageOffset :new BMap.Size(-200,0)
    });
    // 创建标注对象并添加到地图
    let marker = new BMap.Marker(point, {icon: myIcon});
    map.addOverlay(marker);
    // 给标注添加文本信息
     let labelId = new BMap.Label({
         offset: new BMap.Size(0, 0)
     });
     labelId.setStyle({display:'none'});
     // id用于后期索引
     labelId.setContent('<span>id=' + storeid + '</span>');
     marker.setLabel(labelId);
     let lableInfor = new BMap.Label(`${labelText}`,{
        position:point,
        offset : new BMap.Size(-70,6)
     });
     lableInfor.setStyle({backgroundColor: 'rgba(0,0,0,0)', border: 'none', fontSize: '.1rem'});
     lableInfor.setContent('<p class="baidumap-label">'+ labelText +'</p>');
     map.addOverlay(lableInfor);

9.DrivingRoute 驾车路线规划方案

由于需要用到路线规划，所以使用了这个类，通过DrivingRoute(location:Map|Point|String[, opts:DrivingRouteOptions])可以创造一个驾车导航实例

search(start:String|Point, end:String|Point[,options:object])

发起检索功能，需要两个参数:起始位置、结束位置

getResults()

返回最近一次检索结果

clearResults()

清除最近一次检索结果

enableAutoViewport()、disableAutoViewport()

搜索结构显示时，自动调整地图层级、禁用自动调整

setPolylinesSetCallback(callback:Function)

设置添加路线后的回调函数，在这里可以使用driving.getResults();获取搜索的结果，也可以使用 Route.getPolyline()方法获得对应的折现覆盖物，类似的回调设置，有很多个，参考文档，选择需要的即可，下边是一个例子

    // 开启路线规划
    let driving = new BMap.DrivingRoute(map,{
       renderOptions : {
          map:map,
          enableDragging : true, //允许拖动
       }
    })
    // 显示路线前，清空其他规划
    driving.clearResults();
    // 定义一个标注
     let marker = new BMap.Marker(point,{icon:myIcon});
     marker.addEventListener('click', function(e) {
        e.domEvent.stopPropagation();
        // 点击后设置路线规划（规划成功后有其他操作）
        driving.search(r.point,point); //篇幅有限，r.point是用户当前位置,point是选中标注的位置
        driving.setPolylinesSetCallback(function () {
           let results = driving.getResults(); // 获取路线规划结果
           // getDistance(true) 获取距离 getDuration(true) 获取时间
           if (driving.getStatus() == BMAP_STATUS_SUCCESS){
              let journey = results.getPlan(0).getDistance(true);
              console.log(journey); //得到距离
           }
        })
     });
     map.addOverlay(marker);

10.Geolocation 获取本地位置信息

创造实例后，通过getCurrentPosition方法获得，如下：

var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            // 代码 r.point 就是当前位置的坐标，如果后续操作依赖于当前位置信息，需要把代码写在这里边
        }
        else {
            alert('您的浏览器不允许读取位置信息，请重新设置！')
            console.log('failed'+this.getStatus());
        }
      },{enableHighAccuracy: true})

React 中使用百度地图

由于应用使用 react 构建，所以还需要将两者结合，摸索了一下，最终得到一下解决方案

在 render 中定义地图的容器，设定好宽高
在 componentDidMount 中初始化地图，并且把地图挂在到组件上this.map = new BMap.Map("container"); var map = this.map;
如果其他生命周期需要操作map(一般是componentDidUpdate)，直接使用this.map

由于把所有有关地图的操作都拿到 react 组件外了，性能上有一定限制。但目前来讲应用可以正常运行，如果有什么好的解决方案，欢迎提出。

mjzhang1993

关注

9
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
百度地图 API 使用总结

百度地图API学习总结（一）说明公司项目需要一些关于定位和路线规划的功能，需要在网页中嵌入百度地图，这里主要是做一个记录，记录在开发应用中使用过的API，以便以后查询。官方文档及参考指南下载百度地图的官方文档写的很详细，但是内容非常多，并且很多是暂时用不到的，看起来稍微有一些麻烦，但是当你需要查找某些功能时，官方文档又是必不可少的 1.首先进入百度地...
复制链接

扫一扫

专栏目录