400-800-9385
网站建设资讯详细

百度地图API在如何网站上展示十分钟的步行圈?

发表日期:2018-01-03 13:53:33   作者来源:方维网络   浏览:6732   标签:百度地图    
随着地图应用的发展,开发了很多地图API接口,网站使用地图API也变得越来越频繁,今天方维网络给大家讲下百度地图API如何展示一个点或一座大厦的周边环境,也可以叫步行圈,

首先看下展示图片:

百度地图网站

这就是用十分钟的步行圈(周围一千米),现在做房产网站时经常会用的功能,就是一座大厦周边有哪些便民信息,以便用户通过了解大厦周边情况来考虑是否租赁。使用案例可参考《快租街》网站。
 
很多网站地图开发的程序员可能已经在百度地图API示例找到相关的代码了,不过由于输出的列表信息是地图API自带的,所以无法更改样式,需要拥有独特的网站排版样式,就得靠自己获得接口的信息了,下面给大家讲下如何用JS接口获取这些列表信息的返回值,并标注一些参数的使用说明.
 
var map = new BMap.Map("l-map"); //初始化地图
var mPoint = new BMap.Point(113.94442,22.527899); //初始化坐标
var circle = new BMap.Circle(mPoint,1000,{fillColor:"red", strokeWeight: 1 ,fillOpacity: 0.0001, strokeOpacity: 0.5});//圆形初始化,自己可根据自己的需要对参数进行修改
//strokeWeight 圆形区域的大小 
//strokeOpacity:透明度,1为实,不能为0,
//fillOpacity:区域内的背景透明度,1为实,0.01为透明
map.addOverlay(circle);//画一个圆
最重要的一步,循环所有的坐标点:
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var title = results.getPoi(i).title; //标题
Var content =results.getPoi(i).address;//地址信息,包括公交站台,地铁站点
var lng = results.getPoi(i).point.lng;//坐标经度
var lat = results.getPoi(i).point.lat;//坐标纬度
}
local.searchNearby('公交',mPoint,1000);//1000是1000米的圆形范围
local.disableAutoViewport();//自动调整地图视野功能
 
 
由以上信息就能把这些坐标点集合在一起,然后组成一个JS的字符串,将这个字符串的内容赋予一个div,如$(‘#map_result’).html(content);
详细可见源文件,源文件还包括手机版的十分钟的步行圈,页面可直接打开查看。

作者:方维网络陈应信
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/4091.html