微信小程序?qū)崿F(xiàn)搜索指定景點周邊美食、酒店

更新時間：2019年05月18日 16:32:35 作者：宸起

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)搜索指定景點周邊美食、酒店的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序?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 () {
 
 }
})

暫告一段落，下一篇寫指定景點到所選擇的的周邊的導航。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: