微信小程序实现搜索指定景点周边美食、酒店微信小程序实现搜索指定景点周边美食、酒店
本文为大家分享了微信小程序实现指定景点周边的美食、酒店等搜索，供大家参考，具体内容如下
以下为效果图，使用的是腾讯地图位置服务微信小程序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);
},
评论0