微信小程序地图周边功能如何实现?

　　微信小程序地图周边功能如何实现?地图上的周边功能就是给大家介绍介绍你定位的某个点周围都有些什么服务，非常人*化的一个功能，那么怎么实现这个功能呢?下面小编给大家介绍一下吧。

　　微信小程序地图周边功能如何实现?

　　实现原理：

　　使用request接口请求远程s接口，然后返回参数中位置的某种类型的周边信息，最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。

　　实现步骤：

　　1. 创建地图容器

　　微信小程序创建地图容器相对来说比较简单，只需要一个map组件即可，下面代码将完成地图容器的创建：

　　小程序wxml：

　　2. 地图容器全屏

　　上面的代码已经可以正常的创建地图容器了，但是所创建的地图大小不够，所以我们需要给map组件配上style属*，style属*是wxml中几乎所有组件均支持的属*，主要用于给主键配置显示效果。以下地图全屏代码同时适用于wxml的其他组件：

　　- 在map组件上加上style：

　　在js中动态绑定style的高

　　对于组件的宽度全屏我们可以使用100%进行确定，但是高度全屏100%却不能起到任何效果，但是我们可以使用小程序的获取系统信息的接口取得系统的高度，然后动态化绑定到map组件上。js代码如下：

　　3. 引入百度地图小程序api

　　下载bmap-wx.js

　　解压后将bmap-wx.js放入小程序工程里面，我这里是创建一个叫utils的文件夹用于保存这些第三方的工具。

　　在js中使用var bmap = require('../../utils/bmap-wx.js')引入api

　　注：在开始使用该api之前，我们还需要去百度地图上获取一个微信小程序专用的key，在获取这个key的时候需要输入目标小程序的appid。

　　4. 使用api获取周边信息

　　BMap.search接口是用于获取周边信息的接口，官方描述为：查找并展示定位地点周边的POI信息，很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。

　　首先，我们来看一个BMap.search的使用案例:

　　从上面代码中可以看出我们为了使用该接口，在页面数据中加入了三个数据：latitude、longitude和markers，分别用于保存当前poi位置和周边信息的标记。由于页面增加数据了，所以对应的页面也需要做出相应的变化，需要对map组件进行简单的修改：

　　同时添加了两个简单的wxss，这个wxss是给地图脚下增加的一个简单的小程序导航样式：

　　以上就完成了一个简单的地图周边组件，优化一下显示效果就差不多可以用了。

　　以上就是小编为大家搜集的微信小程序地图周边功能如何实现?的全部内容了，希望能帮到大家。如果你还有更多疑问或者建议，可以来我们微小乔的网站哦，谢谢大家的关注!

相关推荐：

微信小程序地图距离怎么获取?

微信小程序地图缩放功能怎么实现?

微信小程序地图控件如何使用?