打开地图、获取经纬度、设置mark的代码就不写了,先看下一开始写的根据经纬度获取poi:
//根据经纬度获取地址 搜索兴趣点,并且按照由远及近排序 aMap.searchNearby({ lon: that.x, //获取的经度 lat: that.y, //获取的纬度 keyword: '学校|饭店|餐馆|写字楼|广场|路口|酒店|大厦|公园|宾馆|会所|科技园|工业园|洗浴|小区|图书馆|道路|网吧', offset: that.pageSize, page: that.pageNum, sortrule: 0, radius:100 }, function(ret) { if (ret.status) { if (that.pageNum === 1) { that.list = []; } //按距离重新排序 ret.pois.sort(function(a, b) { return Math.abs(a.distance - b.distance); }) ret.pois.map(function(item, index) { that.list.push({ checked: that.pageNum === 1 && index === 0 ? true : false, name: item.name, text: item.address, lon: item.lon, lat: item.lat, }) if (that.pageNum === 1 && index === 0) { that.curObj = { name: item.name, text: item.address, lon: item.lon, lat: item.lat }; } }) if (ret.pois.length > 0) { that.pageNum++; that.hasMore = true; } else { that.hasMore = false; } if (!that.hasMore && that.pageNum > 1) { // $.msg('没有更多了!'); } if (typeof fn === 'function') fn(); that.$forceUpdate(); func.hideProgress(); } });上面代码的keyword就是你要显示的范围,我爱模板网尽可能写全了,但是发现结果还是很少,而且不准确,如:明明我在“联投V中心”,列表上始终没看到这个写字楼。这是apicloud提供的方法,看来不行,于是又到高德地图官网找了,终于找到了,使用的是JS SDK的方法实现的,代码如下:
// 高德地图获取附近POI getPoi:function(location,page,offset,keywords,fn,fn2){ //key密钥 var key = '这是key密钥', //坐标转换(这里可要可不要,如果你获取坐标是高德,使用搜索poi也是高德,就没必要转换,但是是百度坐标的话,就将下面的coordsys字段的值改为百度即可,其他同理) zbUrl = 'https://restapi.amap.com/v3/assistant/coordinate/convert', coordsys = 'autonavi', //原坐标系,可选值:gps;mapbar;baidu;autonavi(不进行转换) 默认autonavi //获取附近POI url = 'http://restapi.amap.com/v3/place/around', location = location, page = page || 1, offset = offset || 20, keywords = keywords || '', extensions = 'all'; //判断 if(location){ //发起ajax api.ajax({ url: zbUrl+'?locations='+location+'&coordsys='+coordsys+'&output=json&key='+key, method: 'get', timeout:30, data: {}, },function(ret,err) { console.log('************************ 请求开始 start ************************'); console.log('接口描述:' + '坐标转换'); console.log('请求URL:' + zbUrl); console.log('接口返回:' + JSON.stringify(ret)); if (ret) { //请求服务器成功 //发起ajax api.ajax({ url: url, method: 'get', timeout:30, data: { body : { key : key, location : ret.locations, page : page, offset : offset, keywords : keywords, extensions: extensions } }, },function(ret,err) { console.log('************************ 请求开始 start ************************'); console.log('接口描述:' + '高德地图附近POI'); console.log('请求URL:' + url); console.log('请求参数:' + JSON.stringify({ key : key, location : location, page : page, offset : offset, keywords : keywords, extensions: extensions })); console.log('接口返回:' + JSON.stringify(ret)); if (ret) { //请求服务器成功 //正常回调 if(typeof fn == 'function') {fn(ret);} } else { //请求服务器失败 //错误回调 if(typeof fn2 == 'function') {fn2(ret);} if(err.code == 1){ api.toast({ msg: '当前网络较差', duration: 3000, location: 'middle' }); } console.log('错误信息:' + JSON.stringify(err)); } console.log('************************ 请求结束 end ************************'); }); } console.log('************************ 请求结束 end ************************'); }); }else{ func.msg('经纬不存在') } }, //使用 func.getPoi(that.x+','+that.y,that.pageNum,that.pageSize,that.searchKey,function(res){ if (that.pageNum === 1) { that.list = []; } res.pois.map(function(item, index) { that.list.push({ checked: that.pageNum === 1 && index === 0 ? true : false, name: item.name, text: item.address, lon: item.lon, lat: item.lat, }) if (that.pageNum === 1 && index === 0) { that.curObj = { name: item.name, text: item.address, lon: item.lon, lat: item.lat }; } }) if (res.pois.length > 0) { that.pageNum++; that.hasMore = true; } else { that.hasMore = false; } if (!that.hasMore && that.pageNum > 1) { // $.msg('没有更多了!'); } if (typeof fn === 'function') fn(); that.$forceUpdate(); func.hideProgress(); });至此完成。我爱模板网承接各种混合app、小程序、公众号、网站开发,如果希望合作,可以联系QQ 543031222。