基于Web的百度地图二次开发入门实践
基于Web的百度地图二次开发入门实践
原创qq_29077017 最后发布于2019-11-06 11:07:49 阅读数 81 收藏
展开
在移动互联网相关技术与应用飞速发展的今天，各类行业都离不开位置服务的支持。而现今各大地图平台均开放了位置服务接口供开发者和商家进行调用，更简单的实现相关的二次开发，从而实现各种位置服务的功能。相比于开发时相对复杂、使用时占用更多资源的移动应用客户端，各类移动互联网服务逐渐向Web页面、小程序方向转移。本文将以百度地图开放平台为例，创建浏览器定位的Web应用对LBS的二次开发方法进行说明。
开发前准备
无论使用任何平台进行二次开发，均需要进行注册，获取用于开发的开发者密钥（AK）。对于百度开放平台而言，可按照如下步骤执行，免费的获取AK：
访问百度地图开放平台首页，点击右上角的登陆按钮，如图1所示。然后注册，或者输入百度账号密码进行登录。
图1 登录入口
完成登录后，点击页面上方菜单栏中的“控制台”，如图2所示，进入控制台所在的页面。
图2 进入控制台
在进入控制台后，首先点击控制台左侧的“创建应用”按钮。然后在右侧面板中进行创建应用的相关配置。如果需要进行Web地图的相关开发，需要将应用类型设置为“浏览器端”。在测试时，不做调用网站的限制，即在“Referer白名单”中输入一个星号“*”。对于其余的设置，建议将启用服务全开（毕竟可以尝试更多功能的使用），应用名称按照自己的应用类型起一个便于自己识别的就好。在所有配置均完成后，点击面板最下方的“提交”按钮，实现应用的创建，如图3所示。
图3 创建应用
完成提交后，可以在页面中看到我们创建的应用，以及访问应用的开发者密钥（AK），如图4所示。
图4 完成创建的应用
进行开发
定位技术是各类位置服务的基础，在位置服务领域占据着相当重要的地位。因此，以定位并显示用户当前所在位置为例，进行基于Web的百度地图二次开发入门讲解。
首先，需要在Web页面的head标签中进行百度地图的引入和注册。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥"></script>
1
在上述“密钥”的部分，填写刚刚在应用创建中申请得到的密钥。
在Web页面的body标签中引入地图组件，将这一组件的id记为allmap。
<body>
<div id="allmap"></div>
</body>
1
2
3
继续编写JavaScript代码，创建地图并实现浏览器定位的小功能。
<script>
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
即首先进行地图实例的创建，并将地图中心点选定为116.331398° E，39.897445° N的位置。并以这一中心点将地图层级缩放到第12级进行初始化。
随后，在创建一个geolocation对象后，调用其获取当前位置的方法，进行基于浏览器的当前位置获取调用。如果调用成功获取到用户当前位置，则创建一个标记在得到的位置上，并将地图中心移动到这一位置，从而实现定位的过程。更加具体的说明和介绍可见开发手册-定位方法代码示例。
实现定位页面的完整代码如下：
<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=3.0&ak=密钥"></script>
<title>浏览器定位</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
打开这一页面，所得到的结果如图5（左）所示。对比图5（右）所示的手机地图定位结果，LBS浏览器的定位效果还是相当精准的~
图5 浏览器定位（左）与手机定位结果对比
————————————————
版权声明：本文为CSDN博主「qq_29077017」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_29077017/article/details/102911773
浙公网安备 33010602011771号