本文為大家分享了微信小程序?qū)崿F(xiàn)指定景點周邊的美食、酒店等搜索，供大家參考，具體內(nèi)容如下

以下為效果圖，使用的是騰訊地圖位置服務微信小程序JavaScript SDK，首先要申請騰訊地圖位置服務的開發(fā)密鑰，然后進行開發(fā)。

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頁面的主要函數(shù)有兩個，一個是將具體地址轉(zhuǎn)為經(jīng)緯度的地址解析函數(shù)；一個是根據(jù)指定經(jīng)緯度以及關(guān)鍵詞查找周邊相關(guān)搜索。

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); }, //根據(jù)地址轉(zhuǎn)為經(jīng)緯度 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;  //根據(jù)地址解析在地圖上標記解析地址位置  _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 () {  }})