百度地图WEB服务-全景静态图使用心得

百度地图WEB服务-全景静态图使用心得


在进行一些有关地图或出行服务的应用开发中,常常需要使用到实景的图片以给用户直观的体验,想要实现此功能通过百度地图提供的全景静态图接口即可实现。

全景静态图接口

使用此接口,开发者只需要设置图片尺寸、经纬度坐标等参数,发送HTTP请求访问百度地图全景静态图服务,便可在PC浏览器、手机浏览器、移动APP或者车机显示屏中以图片形式展示全景图。
接口连接如下:

http://api.map.baidu.com/panorama/v2

接口包含参数列表如下:

参数名称说明
ak用户申请注册的key,自v2版本开始参数修改为“ak”,之前版本参数为“key”(申请ak),只支持浏览器端ak和Android/IOS SDK的ak,服务端ak不支持sn校验方式
location全景位置点坐标。坐标格式:lng<经度>,lat<纬度>,例如116.313393,40.047783。
panoid全景图id
poiidpoi的id
coordtype全景位置点的坐标类型,目前支持bd09ll(百度坐标),wgs84ll(GPS坐标)和gcj02(google,高德,soso坐标),默认为bdo9ll
width获取返回图片宽度值(像素值),范围[10,1024](默认值400)
height获取返回图片高度值 (像素值),范围[10,512](默认值300)
fov水平方向范围,范围[10,360],fov=360即可显示整幅全景图
heading水平视角,范围[0,360]
pitch垂直视角,范围[0,90]
mcode安全码。若为Android/IOS SDK的ak, 该参数必需

以上参数中ak为必填字段,是开发者调用该接口的唯一标识。
location,panoid,poiid三者在调用时分使用情况选择至少一种填写即可,三参数字段优先级为:poiid>panoid>location,下为具体使用区别:

  • location:根据经纬度获取对应实景图,使用此参数可能出现无法获得对应图片情况,使用时需注意,使用其他两种获取图片更加稳定。
  • panoid:根据全景图id获取对应全景图,在知道相应实景图id情况下使用此参数更加稳妥。
  • poiid:根据POI中返回id获取,此参数是我认为最常用和稳妥的使用参数,此id可通过地点检索接口或逆编码接口等百度地图提供接口返回的POI信息中获得的对应接口中获得。

若对POI不是很了解可阅读百度地图官方文档:http://lbs.baidu.com/index.php?title=iossdk/guide/search/poi
或观看笔者上一篇关于逆编码文章中介绍:
https://blog.csdn.net/tom_gy_/article/details/103153408
以上参数为必填参数,若开发者对返回的实景图片显示有其他要求可添加如下参数:

  • width;height:使用这两个参数控制返回图片的大小。
  • fov;heading;pitch:结合此三个参数控制返回图片大小视角范围。

若读者对这些参数使用任有疑惑,可继续向下看关于此接口的测试例子。

Postman接口请求测试

本次测试以故宫的uid作为实景图调用主要参数。

故宫uid:06d2dffda107b0ef89f15db6

在这里插入图片描述
不使用控制返回图片大小视角范围参数测试请求链接:

http://api.map.baidu.com/panorama/v2?ak=你的ak&width=300&height=300&poiid=06d2dffda107b0ef89f15db6

返回图片:
在这里插入图片描述
使用控制返回图片大小视角范围参数测试请求链接:

http://api.map.baidu.com/panorama/v2?ak=你的ak&width=600&height=300&poiid=06d2dffda107b0ef89f15db6&fov=360

返回图片:
在这里插入图片描述
以上为笔者本人对百度地图WEB服务实景图接口的一些使用理解,希望对读者有帮助。
更多有关实景图接口使用详情可查看官方服务文档:http://lbsyun.baidu.com/index.php?title=viewstatic
相关百度地图方面博文后面会持续更新,欢迎大家支持!

百度map,百度map API,百度地图 实现百度地图动态搜索、静态地图动态插入 mygw@163.com js 内容如下: /** 加载地图的主控类 */ var MapControl={ staticWith : 512,//链接静态图宽度 staticHeight : 320,//链接静态图的高度 container : 'mapcontainer',//显示map的节点id defzoom:12,//默认缩放比例 map : '', marker : '', city : '深圳', infoWinContent : '请移动此标记到您的婚礼地点位置!', /** 提示信息窗内容 */ infoOpts : { width : 100, // 信息窗口宽度 height: 50, // 信息窗口高度 title : "提示:" // 信息窗口标题 }, /** *默认显示窗口 */ defWindow : function(){ this.map = new BMap.Map(this.container); this.map.centerAndZoom(this.city,this.defzoom); // 通过城市名初始化地图 this.map.addEventListener("load", function(){ // 初始化方法执行完成后即可获取地图中心点信息 MapControl.marker = new BMap.Marker( this.getCenter()); // 创建标注 this.addOverlay(MapControl.marker ); // 将标注添加到地图中 MapControl.marker.enableDragging(); var infoWindow = new BMap.InfoWindow(MapControl.infoWinContent, MapControl.infoOpts); // 创建信息窗口对象 MapControl.marker.addEventListener("mouseover", function(){ this.openInfoWindow(infoWindow); // 打开信息窗口 }) MapControl.marker.addEventListener("mouseout", function(){ this.closeInfoWindow(); // 打开信息窗口 }) }) //map 增加操作 this.map.addControl(new BMap.NavigationControl()); this.map.addControl(new BMap.ScaleControl()); this.map.addControl(new BMap.OverviewMapControl()); this.map.addControl(new BMap.MapTypeControl()); }, /** * 搜索地址 */ search : function(address){ if(this.map=='' || this.map == 'undefined' || address=='' ){ return ; } this.city=address; this.defWindow(); }, /** * 获取静态图片地址 */ getStaticMap : function(){ if(this.map=='' || this.map == 'undefined' || this.marker=='' ){ return ; } var center=this.map.getCenter().lng+','+this.map.getCenter().lat; var markers= this.marker.getPosition().lng+','+this.marker.get
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值