微信小程序实现搜索指定景点周边美食、酒店

本文为大家分享了微信小程序实现指定景点周边的美食、酒店等搜索,供大家参考,具体内容如下

以下为效果图,使用的是腾讯地图位置服务微信小程序JavaScript SDK,首先要申请腾讯地图位置服务的开发密钥,然后进行开发。

wxml:

<view style='width:100%;height:{{height}}px;'>

<map id="map" longitude='{{poi.longitude}}' latitude='{{poi.latitude}}' scale='16' markers='{{markers}}' style='width:100%;height:{{height}}px;' show-location bindmarkertap='gotoHere'></map>

<view class='nav'>

<button bindtap='search' data-type='酒店' class='nav-but'>酒店</button>

<button bindtap='search' data-type='美食' class='nav-but'>美食</button>

<button bindtap='search' data-type='书店' class='nav-but'>书店</button>

<button bindtap='search' data-type='商城' class='nav-but'>商城</button>

</view>

</view>

<view class='info'>

<navigator wx:for="{{perimeter}}" url="../routes/routes?latitude={{startlat}}&&longitude={{startlng}}&&latitude2={{item.location.lat}}&&longitude2={{item.location.lng}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

<view class="weui-media-box__title">{{item.title}}</view>

<view class="weui-media-box__desc">位置:{{item.address}} </view>

</view>

</navigator>

</view>

js页面的主要函数有两个,一个是将具体地址转为经纬度的地址解析函数;一个是根据指定经纬度以及关键词查找周边相关搜索。

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

var qqmapsdk;

var startlat;

var startlng;

Page({

data: {

height:"400",

perimeter:[]

},

onLoad: function (options) {

var address = options.address;

// 实例化API核心类

qqmapsdk = new QQMapWX({

key: 'IBCBZ-XXXXXXXXXXXXXXXXXXXXX'

});

this.addressGeocoder(address);

},

search:function(e){

var _this = this;

var a = e.target.dataset.type;

//console.log("a="+a);

_this.nearby_search(a);

},

//根据地址转为经纬度

addressGeocoder:function(address){

var _this = this;

qqmapsdk.geocoder({

address:address,

success:function(res){

console.log("res="+res);

var res = res.result;

var latitude = res.location.lat;

var longitude = res.location.lng;

//根据地址解析在地图上标记解析地址位置

_this.setData({

markers:[{

id:0,

title:res.title,

latitude:latitude,

longitude:longitude,

iconPath:'../../images/marker_checked.png',

width:20,

height:20

}],

poi:{

latitude:latitude,

longitude:longitude

},

startlat:latitude,

startlng:longitude

});

},

fail:function(error){

console.error("error="+error);

},

complete:function(res){

console.log("complete="+res);

}

})

},

//周边地点搜索

nearby_search:function(keyword){

var _this = this;

qqmapsdk.search({

keyword:keyword,

location:_this.data.poi,

success:function(res){

var obj = JSON.stringify(res);

console.log("obj="+obj);

var mks = [];

for(var i = 0; i <res.data.length; i++){

mks.push({

title:res.data[i].location.lat,

id:res.data[i].id,

latitude:res.data[i].location.lat,

longitude:res.data[i].location.lng,

iconPath:"../../images/marker.png",

width:20,

height:20,

callout:{

content: res.data[i].title,

color:'#000',

display:'ALWAYS'

}

})

}

_this.setData({

//markers:mks

markers:mks,

perimeter:res.data

})

},

fail:function(res){

console.log("fail="+res);

},

complete:function(res){

console.log("complete="+res);

}

});

},

gotoHere:function(res){

var obj = JSON.stringify(res);

console.log("gotoHere="+obj);

},

onShow: function () {

}

})

暂告一段落,下一篇写指定景点到所选择的的周边的导航。

以上是 微信小程序实现搜索指定景点周边美食、酒店 的全部内容, 来源链接: utcz.com/z/353852.html

回到顶部