利用百度地图开放平台的Web API实现检索定位

最新推荐文章于 2022-10-24 17:33:41 发布

小e.相

最新推荐文章于 2022-10-24 17:33:41 发布

阅读量3.7k

点赞数

分类专栏：网页开发文章标签： HTML Web API 检索定位

本文链接：https://blog.csdn.net/weixin_45755438/article/details/102998080

版权

网页开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先注册一个百度账号
登录百度地图开放平台，点击开发文档→Web服务API，要想用百度地图开放平台的应用，先要申请成为百度地图开发者，获取服务密钥（AK）
获取密钥（AK）的步骤

提交后会生成一个AK码

4．接着就可以进行开发工作了
本文提供的是检索定位操作，检索POI（Point of Interest，感兴趣点）有三种检索方法，城市检索，圆形区域检索，矩形区域检索。
运用AK（密钥）可以调用百度地图开放平台的API进行网页开发，搜索定位自己的想要的地方
城市检索：search方法根据关键字检索特定POI信息服务
源码：

<!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>城市检索</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=自己的密钥（AK）">
</script>
</head> 

<body> 
<div id="container"></div> 
<script type="text/javascript">
var map = new BMap.Map("container");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var local = new BMap.LocalSearch(map, {      
    renderOptions:{map: map}      
});      
local.search("天安门");
</script> 
</body> 
</html>

结果：
在这里插入图片描述
圆形区域检索：searchNearby方法提供圆形区域检索服务，可以在某个地点附近进行搜索，也可以在某一个特定结果点周围进行搜索。
源码：

<!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>圆形区域检索</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=自己的密钥（AK）">
</script>
</head> 

<body> 
<div id="container"></div> 
<script type="text/javascript">
var map = new BMap.Map("container");         
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var local = new BMap.LocalSearch(map,   
              { renderOptions:{map: map, autoViewport: true}});      
local.searchNearby("小吃", "前门");
</script> 
</body> 
</html>

结果：
在这里插入图片描述
矩形区域检索：searchInBounds方法提供矩形区域检索服务。矩形范围搜索将根据您提供的视野范围提供搜索结果。
源码：

<!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>矩形区域检索</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=自己的密钥（AK）">
</script>
</head> 

<body> 
<div id="container"></div> 
<script type="text/javascript">
var map = new BMap.Map("container");        
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);      
var local = new BMap.LocalSearch(map,   
              { renderOptions:{map: map}});      
local.searchInBounds("银行", map.getBounds());
</script> 
</body> 
</html>