百度地图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/news43/248043.html

成都网站建设公司_创新互联，为您提供响应式网站、网站营销、网站策划、ChatGPT、网站导航、网站维护

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

猜你还喜欢下面的内容