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

<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>

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 () {
 
 }
})