微信小程序之获取当前位置附近的美食、酒店、娱乐、超市等，并显示标记

运行效果

功能介绍

本页面首先利用微信小程序的getLocation方法获取用户当前的位置，如果用户未授权获取位置可进行提示,根据用户当前位置的经度和纬度，调用腾讯地图SDK地点搜索功能，实现返回搜索结果和标记点的效果。

代码解读

wxml页面

在wxml页面主要使用了地图组件和滚动视图区域组件地图组件为map，可以指定其宽高、显示层级、标记点；滚动视图区域为scroll-view通过设置其宽度和高度，再设置scroll-x或者scroll-y来实现滚动的效果，wxml页面代码如下，代码中只添加了两个图，有兴趣的同学可以从阿里巴巴矢量库中下载形影关键词对应的图片，调整text组件宽度来实现最终页面效果。

view class="outer">  <map id="map" longitude='{{longitude}}' latitude='{{latitude}}' markers='{{markers}}' show-location></map><view class='nav'>    <image src='images/酒店.png' mode="aspectFit"></image>    <text bindtap='search' data-type='酒店'>酒店</text>    <image src='images/美食.png' mode="aspectFit"></image>    <text bindtap='search' data-type='美食'>美食</text>    <text bindtap='search' data-type='娱乐'>娱乐</text>    <text bindtap='search' data-type='超市'>超市</text>    <text bindtap='search' data-type='公园'>公园</text></view><view class='location'><scroll-view scroll-y><block wx:for="{{perimeter}}" wx:key="key"><view class="content">        <view class="title">{{item.title}}</view>          <view class="address">位置：{{item.address}}</view> </view></block></scroll-view></view></view>

2wxss页面

样式表页面中，通过设置导航区域nav和下方地点呈现区域location的绝对定位来实现，代码如下：

.outer,map{  width:100%;  height:100vh}.outer{  position:relative;}.location{position: absolute;bottom:0;z-index:100}.nav{position: absolute;top:0;z-index:100;background: #fff;border-bottom:1px solid #dfdfdf;}.nav text{display:inline-block;height:100rpx;line-height: 100rpx;border-right:1px solid #dfdfdf;padding:30rpx;}.nav image{  width:40rpx;  height:40rpx;}scroll-view{  height:600rpx;  background:#fff;}scroll-view .content{  border-bottom:1px solid #dfdfdf;  width:100%;  padding:30rpx;}scroll-view .title{  font-size:16px;}scroll-view .address{  font-size:10px;  color:rgb(83, 78, 78)}

3js页面

js页面的核心功能就是根据传递过来的关键词查询当前地点附近的相应地点，使用腾讯地图SDK功能之前要先注册腾讯位置服务并创建key，具体操作不周可以参考这篇文章，通过点击导航上不同的关键词，通过data-type属性将关键词传递到js中，调用腾讯地图中的search方法来实现。

search: function (e) {    var type = e.target.dataset.type;    this.nearbySearch(type);  },  nearbySearch: function (keyword) {    var location = this.data.latitude + ',' + this.data.longitude    let _this = this;    qqmapsdk.search({      keyword: keyword,      location: location,        success: function (res) {        var markers = [];        for (var i = 0; i < res.data.length; i++) {          markers.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/location.png",            width: 20,            height: 20,            callout: {              content: res.data[i].title,              color: '#000',              display: 'ALWAYS'            }          })        }        _this.setData({          markers: markers,          perimeter: res.data        })      }    })}

如需源码，关注下方公众号，后台回复“图片合成小程序”，感谢阅读，感谢关注

微信小程序之获取当前位置附近的美食、酒店、娱乐、超市等，并显示标记相关推荐

利用微信小程序API获取所在位置周围的WIFI信息
前言这是我的第一篇博客,内心有点激动紧张. 为什么要写这一篇呢? 因为最近在跟老师做一个基于WIFI的室内定位的项目,里面需要获取周围WIFI信息,这困惑了我很长一段时间,查了很多百度,看了很多博客 ...
获取微信小程序右上角胶囊的位置
获取微信小程序右上角胶囊的位置微信中有一个api是用来获取胶囊的位置以及其他信息的,这个可以在我们使用自定义的标题的时候避开这个位置,或者自己写点什么东西 ,要和胶囊对齐的 api wx.getMe ...
微信小程序调用腾讯位置服务获取城市列表
微信小程序调用腾讯位置服务获取城市列表注意前期的准备: 1.需要用到微信小程序JavaScript SDK https://lbs.qq.com/miniProgram/jsSdk/jsSdkGui ...
微信小程序之获取用户地址
在微信小程序中获取定位信息今天一整天基本上都在处理在微信小程序中获取准确地址,给出定位并给出所在城市的问题.经过走了半天弯路,现在总结一下所需要的步骤. 一. 先到腾讯位置服务中心获取KEY 通过小 ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
微信小程序iBeacon获取问题（wx.onBeaconUpdate不执行）【已解决】
微信小程序iBeacon获取问题(wx.onBeaconUpdate不执行)[已解决] 问题描述软件硬件使用代码问题现象解决办法问题描述长话短说,使用某公司的iBeacon标签设备,开发微 ...
关闭微信小程序电脑端的位置定位
关闭微信小程序电脑端的位置定位关闭微信小程序电脑端的位置定位 1.使用fiddler获取微信小程序获取定位的网址 2.在host文件中将其禁止 3.删除微信小程序的缓存 3.再启动微信小程序即可关 ...
微信小程序缓存获取数据教程
微信小程序缓存获取数据教程每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSy ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...

微信小程序之获取当前位置附近的美食、酒店、娱乐、超市等，并显示标记

微信小程序之获取当前位置附近的美食、酒店、娱乐、超市等，并显示标记相关推荐

最新文章

热门文章