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

问题描述

问 题

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

解决方案

可以实现，之前做过这个。不过需要自行 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点个数
});

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

这篇关于javascript - 百度外卖选择地址中的地图功能是怎么实现的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！