介绍 & lt; view 风格=& # 39;宽度:100%;高度:{{高度}}px; & # 39;比;
,& lt; map id=癿ap",经度=& # 39;{{poi.longitude}} & # 39;,纬度=& # 39;{{poi.latitude}} & # 39;,规模=& # 39;16 & # 39;,标记=& # 39;{{标记}}& # 39;,风格=& # 39;宽度:100%;高度:{{高度}}px; & # 39;, show-location bindmarkertap=& # 39; gotoHere& # 39;祝辞& lt;/map>
,& lt; view 类=& # 39;nav # 39;比;
,& lt; button bindtap=& # 39;搜索# 39;,数据类型=& # 39;酒店& # 39;,类=& # 39;nav-but& # 39;在酒店& lt;/button>
,& lt; button bindtap=& # 39;搜索# 39;,数据类型=& # 39;美食& # 39;,类=& # 39;nav-but& # 39;在美食& lt;/button>
,& lt; button bindtap=& # 39;搜索# 39;,数据类型=& # 39;书店& # 39;,类=& # 39;nav-but& # 39;在书店& lt;/button>
,& lt; button bindtap=& # 39;搜索# 39;,数据类型=& # 39;商城& # 39;,类=& # 39;nav-but& # 39;在商城& lt;/button>
,& lt;/view>
& lt;/view>
& lt; view 类=& # 39;信息# 39;比;
,& lt; navigator wx:=皗{周边}}“,url=? ./线路/路线?={{startlat}},纬度和经度={{startlng}},, latitude2={{item.location.lat}},, longitude2={{item.location.lng}}“,类=皐eui-media-box weui-media-box_appmsg", hover-class=皐eui-cell_active"比;
& lt;才能view 类=皐eui-media-box__bd weui-media-box__bd_in-appmsg"比;
& lt;才能view 类=皐eui-media-box__title"在{{item.title}} & lt;/view>
,,& lt; view 类=皐eui-media-box__desc"祝辞位置:{{item.address}}, & lt;/view>,
& lt;才能/view>
,& lt;/navigator>
& lt;/view> var QQMapWX =,要求(& # 39;. ./. ./跑龙套qqmap-wx-jssdk.js& # 39;);
var qqmapsdk;
var startlat;
var startlng;
,
页面({
,数据:{
,高度:“400”,
,周边:[]
},
,onLoad: function (选项),{
,var address =, options.address;
,//实例化API核心类=,,qqmapsdk new QQMapWX ({
,,关键:& # 39;IBCBZ-XXXXXXXXXXXXXXXXXXXXX& # 39;
,});
,this.addressGeocoder(地址);
},
,搜索:函数(e) {=,var _this ;
,var a =, e.target.dataset.type;
,//console.log (“=? a);
,_this.nearby_search(一个);
},
,//根据地址转为经纬度
,addressGeocoder:函数(地址){=,var _this ;
,qqmapsdk.geocoder ({
地址:地址,才能
成功:才能函数(res) {
console.log才能(“res=? res);
var 才能;res =, res.result;
var 才能;latitude =, res.location.lat;
var 才能;longitude =, res.location.lng;//根才能据地址解析在地图上标记解析地址位置
_this.setData({才能
,,标记:[{
,,id: 0,
,,标题:res.title,
,,纬度:纬度,
,,经度:经度,
,,iconPath: & # 39; . ./. ./图片/marker_checked.png& # 39;,
,,宽度:20,
,,身高:20
,,},
,,poi: {
,,纬度:纬度,
,,:经度
,,},
,,startlat:纬度,
,,startlng:经度
,,});
,,},
失败:函数才能(错误){
console.error才能(“错误=?错误);
,,},
完整的才能:函数(res) {
console.log才能(“完成=? res);
,,}
,})
},
,//周边地点搜索
,nearby_search:函数(关键字){=,var _this ;
,qqmapsdk.search ({
关键字:关键字,才能
地点:_this.data.poi,才能
成功:才能函数(res) {
var 才能;obj =, JSON.stringify (res);
console.log才能(“obj=? obj);
var 才能;mks =, [];
,,(var 小姐:=,0;,小姐:& lt; res.data.length;,我+ +){
,,mks.push ({
,,标题:res.data[我].location.lat,
,,id: res.data[我].id,
,,纬度:res.data[我].location.lat,
,,经度:res.data[我].location.lng,
,,iconPath:“. ./. ./图像/marker.png"
,,宽度:20,
,,身高:20,
,才能调出:{
,,,内容:,res.data[我].title,
,,,颜色:& # 39;# 000 & # 39;
,,,显示:& # 39;总是# 39;
,,}
,,})
,,}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关微信小程序如何实现搜索指定景点周边美食,酒店的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
以下为效果图,使用的是腾讯地图位置服务微信小程序JavaScript SDK,首先要申请腾讯地图位置服务的开发密钥,然后进行开发。
wxml:
js页面的主要函数有两个,一个是将具体地址转为经纬度的地址解析函数;一个是根据指定经纬度以及关键词查找周边相关搜索。
