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


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 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
村干部培训班主持词
2014/03/28 职场文书
医院领导班子整改方案
2014/10/01 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Redis命令处理过程源码解析
2022/02/12 Redis
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
Go语言怎么使用变长参数函数
2022/07/15 Golang