基于百度地图API入门开发方法

味淡人常

于 2023-11-26 11:12:19 发布

阅读量132

点赞数

分类专栏： Web开发文章标签：百度 dubbo

本文链接：https://blog.csdn.net/ZKAI02/article/details/134624397

版权

Web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是API？API与SDK的关系？

1、什么是API

API（Application Programming interface，即应用程序接口）。

API是一组封装良好的类，具有高内聚和低耦合的特点。
API提供实现某一功能，获取某些数据所需的方法。
用户不用了解具体的实现过程

传统模式：功能自主编程实现，工作量大，效率低
基于API：功能主要依靠调用API实现

2、什么是SDK

SDK（Software Development Kit,软件开发工具包），一般都是某些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。
SDK = 开发工具包 = 各类控件 + API + 文档 + 驱动 + …

API VS SDK：
API：只需要调用和传入参数即可。开发难度低、功能较简单、灵活性低。
SDK：需要编写大量代码。开发难度高，功能丰富、灵活性高。

二、百度API开发方法

1、申请百度帐号和ak

Alt

图1 获得ak

2、准备页面并设置样式

 <style type="text/css">
                    html{height: 100%;}
                    body{height: 100%;margin: 0px;padding: 0px;}
                    #container{height:100%}
                </style>

为页面设置样式，使地图充满整个页面

3、创建地图容器并完成初始化

（1）引入百度地图API文件

<script type="text/javascript"
                src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>

（2）创建地图容器元素

 <body >
            <div id="container"></div>
 </body>

地图需要一个HTML元素作为容器来展示到页面上

（3）完成初始化

window.onload=function(){
                        var map=new BMapGL.Map("container");//创建地图实例
                        var point=new BMapGL.Point(116.404,39.915);//设置中心点坐标
                        map.centerAndZoom(point,15);//初始化地图，设置中心点坐标和地图级别
                        
                        }

使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，116.404,39.915使经纬度。
BMapGL.Map.centerAndZoom()方法设置中心点坐标和地图缩放级别为15。

（4）配置

map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
map.setTilt(73); //设置地图的倾斜角度
map.setHeading(64.5); //设置地图的旋转角度
map.setMapType(BMAP_EARTH_MAP);//设置地图类型

标准地图：BMAP_NORMAL_MAP
地球模式：BMAP_EARTH_MAP
普通卫星地图：BMAP_SATELLITE_MAP

图2 地球模式

添加控件

//使用map.addControl()方法向地图添加控件
                        var scaleCtrl = new BMapGL.ScaleControl(); //添加比例尺控件
                        map.addControl(scaleCtrl);
                        var zoomCtrl = new BMapGL.ZoomControl(); //添加缩放控件
                        map.addControl(zoomCtrl);
                        var cityCtrl = new BMapGL.CityListControl(); //添加城市列表控件
                        map.addControl(cityCtrl);
                        var navi3DCtrl = new BMapGL.NavigationControl3D(); //添加3D控件
                        map.addControl(navi3DCtrl);

控件初始化

                       var opts1 = {
                            offset:new BMapGL.Size(30,10),
                            anchor:BMAP_ANCHOR_TOP_RIGHT
                        }
                        var opts2 = {
                            offset:new BMapGL.Size(35,50),
                            anchor:BMAP_ANCHOR_TOP_RIGHT
                        }
                        var opts3 = {
                            offset:new BMapGL.Size(48,140),
                            anchor:BMAP_ANCHOR_TOP_RIGHT
                        }
                        //使用map.addControl()方法向地图添加控件
                        var scaleCtrl = new BMapGL.ScaleControl(); //添加比例尺控件
                        map.addControl(scaleCtrl);
                        var zoomCtrl = new BMapGL.ZoomControl(opts3); //添加缩放控件
                        map.addControl(zoomCtrl);
                        var cityCtrl = new BMapGL.CityListControl(opts1); //添加城市列表控件
                        map.addControl(cityCtrl);
                        var navi3DCtrl = new BMapGL.NavigationControl3D(opts2); //添加3D控件
                        map.addControl(navi3DCtrl);

Alt

图3 控价初始化

添加标记点,使用自定义图标

//创建自己的定位图标
                        var myIcon = new BMapGL.Icon("https://ts1.cn.mm.bing.net/th/id/R-C.f381b337b8704adee56fd8bbb11c7e2e?rik=P%2bxXNfMckCA8%2fg&riu=http%3a%2f%2fimg01.lianzhong.com%2fupload%2fnewbbs%2f2013%2f03%2f06%2f562%2f128564395004891.png&ehk=P3bcThlHnZ2OjeCcvPwkNFAVJahbGNHchAIGOtc7DOU%3d&risl=&pid=ImgRaw&r=0", 
                                                      new BMapGL.Size(50,50));
                        //创建点标记，创建Marker标注，使用自定义图标
                        var point = new BMapGL.Point(116.404,39.925);
                        var marker = new BMapGL.Marker(point,{ icon:myIcon});
                        map.addOverlay(marker);

在标记点上添加信息框

//添加信息窗口
                        var opts = {
                            width:200,
                            height:100,
                            title:'故宫博物院'
                        };
                        var sContent = "北京故宫博物院北京故宫博物院建立于1925年，是在明朝、清朝两代皇宫及其收藏的基础"+"上建立起来的中国综合性博物馆，也是中国最大的古代文化艺术博物馆";
                        var infoWindow = new BMapGL.InfoWindow(sContent, opts);
                        map.openInfoWindow(infoWindow, point);

注意：InfoWindow的content支持html内容。

实现定位，并获取用户的地址解析以及解析结果

//实现定位
                        var geolocation = new BMapGL.Geolocation();
                        geolocation.getCurrentPosition(function (r){
                            if (this.getStatus() == BMAP_STATUS_SUCCESS){
                            var mk = new BMapGL.Marker(r.point);
                            map.addOverlay(mk);
                            map.panTo(r.point);
                            alert('您的位置：'+r.point.lng +','+ r.point.lat);
                            var geoc = new BMapGL.Geocoder();//获取用户的地址解析
                            geoc.getLocation(r.point,function (rs){//解析结果
                                alert(rs.address);
                            })
                            }
                            else{
                                alert('failed' + this.getStatus());
                            }
                        });

味淡人常

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于百度地图API入门开发方法

API（Application Programming interface，即应用程序接口）。API是一组封装良好的类，具有高内聚和低耦合的特点。API提供实现某一功能，获取某些数据所需的方法。用户不用了解具体的实现过程传统模式：功能自主编程实现，工作量大，效率低基于API：功能主要依靠调用API实现SDK（Software Development Kit,软件开发工具包），一般都是某些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。
复制链接

扫一扫