微信小程序实现搜索指定景点周边美食、酒店
(编辑：jimmy 日期: 2024/11/18 浏览：2)
本文为大家分享了微信小程序实现指定景点周边的美食、酒店等搜索，供大家参考，具体内容如下
以下为效果图，使用的是腾讯地图位置服务微信小程序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" 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 () {
}
})
暂告一段落，下一篇写指定景点到所选择的的周边的导航。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。