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


Posted in Javascript onMay 18, 2019

本文为大家分享了微信小程序实现指定景点周边的美食、酒店等搜索,供大家参考,具体内容如下

以下为效果图,使用的是腾讯地图位置服务微信小程序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 () {
 
 }
})

暂告一段落,下一篇写指定景点到所选择的的周边的导航。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
微信小程序代码上传、审核发布小程序
May 18 #Javascript
详解js中let与var声明变量的区别
Apr 05 #Javascript
webpack中如何加载静态文件的方法步骤
May 18 #Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php 强制下载文件实现代码
2013/10/28 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
深入理解Python中range和xrange的区别
2017/11/26 Python
python并发编程之线程实例解析
2017/12/27 Python
Python使用wxPython实现计算器
2018/01/30 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python怎么判断素数
2020/07/01 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
员工廉洁自律承诺书
2014/05/26 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
四则混合运算教学反思
2016/02/23 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang