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

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

 

 
 

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

 

 
 

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

 

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