摘要:虽然小程序中有各种组件和接口，但只提供了我们一个获取地理位置和速度的api，并没有获取的相关地位位置

虽然小程序中有各种组件和接口，但只提供了我们一个获取地理位置和速度的api，并没有获取的相关地位位置的信息，因此我们还需要借助一些第三方的api来实现。当前百度和高德周边查询api实现机制基本相同，都是使用request接口请求远程https接口，然后返回参数中位置的某种类型的周边信息，最后再把数据动态绑定到页面。

具体实现步骤

1. 创建地图容器

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

- wxml代码

markers={{markers}} style=width: 100%; height: {{height-30}}px;>

酒店

美食

书店

商场

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

/**index.wxss**/

.nav{

position: fixed;

z-index: 10000;

bottom: 0px;

width: 100%;

height: 30px;

}

.nav-but{

border: cadetblue 1pxsolid;

border-radius: 0px;

width: 25%;

text-align:center;

line-height: 30px;

display: inline-flex;

}

整个过程下来只需优化下显示效果就可以直接使用了，不过百度api还存在bug，如果不进行修复只能查询当前地址周边地理信息。

推荐阅读：微信小程序怎么制作分页加载数据