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

最新推荐文章于 2025-04-23 09:50:49 发布

lily_808

最新推荐文章于 2025-04-23 09:50:49 发布

阅读量8.7k

点赞数 2

文章标签：小程序腾讯推荐系统

本文链接：https://blog.csdn.net/lily_808/article/details/106174735

版权

本文介绍如何利用微信小程序的getLocation方法获取用户位置，并结合腾讯地图SDK，实现搜索用户附近的美食、酒店、娱乐和超市等功能。通过在地图上显示标记点，展示搜索结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行效果

功能介绍

本页面首先利用微信小程序的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