国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 課堂 > 小程序 > 正文

微信小程序實現搜索指定景點周邊美食、酒店

2020-03-21 15:56:09
字體:
來源:轉載
供稿:網友

本文為大家分享了微信小程序實現指定景點周邊的美食、酒店等搜索,供大家參考,具體內容如下

以下為效果圖,使用的是騰訊地圖位置服務微信小程序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); }, 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 () {  }})

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 大埔县| 田阳县| 子长县| 绥棱县| 武城县| 东莞市| 寻乌县| 连山| 浏阳市| 扶余县| 田林县| 东乌珠穆沁旗| 蒙山县| 德令哈市| 阿荣旗| 潜山县| 舞阳县| 页游| 故城县| 西丰县| 滨海县| 翼城县| 环江| 含山县| 射阳县| 江口县| 屏山县| 株洲县| 镇原县| 政和县| 望谟县| 昔阳县| 枣庄市| 梁河县| 静乐县| 米脂县| 长泰县| 且末县| 当阳市| 普陀区| 若羌县|