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


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 相关文章推荐
js里怎么取select标签里的值并修改
Dec 10 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
深入理解node.js之path模块
May 03 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
村官工作鉴定评语
2014/01/27 职场文书
协议书怎么写
2014/04/21 职场文书
开展创先争优活动总结
2014/08/28 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2014年护理部工作总结
2014/11/14 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫