百度外卖选择地址中的地图功能是怎么实现的?

发布于 2022-09-03 00:47:13 字数 157 浏览 14 评论 0

最近需求要做一个类似百度外卖点餐后选择地址时定位的功能,具体的意思大概是点击后弹出百度地图,上面的地图部分大头针固定,地图可以拖动,拖动后下面的列表中会出现附近的建筑物信息,我看了百度地图的API,似乎没有找到相关的内容,请问这个功能是怎么实现的,能够实现吗,是不是百度地图针对外卖定制的这个功能呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

幻想少年梦 2022-09-10 00:47:14

可以实现,之前做过这个。不过需要自行 DIY 一些元素上去,比如那个固定大头针(虽然自带的有,可总归是丑)和附近地点的列表。

有几个类你需要了解:

Geocoder

通过 getLocation 可以对一个目标地点进行解析,回调中可以拿到一个 GeocoderResult 对象。

GeocoderResult

其中的 surroundingPois 属性是一个数组,也就是附近的POI点信息,其他属性比如 address 也可能会用到,你可以输出下看看。

LocalResultPoi

上面的数组中的每个元素是一个 LocalResultPoi 对象,可以通过它的属性输出你想要的信息。

示例:

var map = new BMap.Map('map');
var geocoder = new BMap.Geocoder();
var point = new BMap.Point(xxx, xxx);  //标注所在的目标点

geocoder.getLocation(point, function(result) {

    console.log('address: ' + result.address);
    
    var pois = result.surroundingPois;
    
    for(var poi, i = 0, len = pois.length; i < len; i++){
        poi = pois[i];
        console.log('第' + i + '个POI, title: ' + poi.title + ', address: ' + poi.address)
    }
}, {
    poiRadius: 500,  // 检索范围,单位:米
    numPois: 10  // 返回的POI点个数
});

至于你想怎么显示,自己发挥吧。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文