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

2023-03-27    分类: 网站建设

随着地图应用的发展,开发了很多地图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);
详细可见源文件,源文件还包括手机版的十分钟的步行圈,页面可直接打开查看。

新闻名称:百度地图API在如何网站上展示十分钟的步行圈?
路径分享:https://www.cdcxhl.com/news/248043.html

成都网站建设公司_创新互联,为您提供品牌网站设计定制开发企业网站制作商城网站网站策划网站改版

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站建设网站维护公司