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


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 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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中实现图片的锐化
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
工程总经理工作职责
2013/12/09 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
广播体操比赛口号
2014/06/10 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS