小程序之地图周边

原理

当前百度和高德周边查询api的实现机制基本一致，都是使用request接口请求远程https接口，然后返回参数中位置的某种类型的周边信息，最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。

步骤

1. 创建地图容器

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

<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"></map>

• map组件简介

  map组件默认使用腾讯地图，只要在wxml中书写

  • longitude & latitude 这两个属性一般都是成对出现，用于初始化地图中心位置
  • scale 该属性表示地图的缩放级别，数字越大比例尺越小。根据文档上说默认值为：16

2. 地图容器全屏

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

<!-- index.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14"
 style="width: 100%; height: {
   {
   height}}px;"></map>

• 在js中动态绑定style的高
  对于组件的宽度全屏我们可以使用100%进行确定，但是高度全屏100%却不能起到任何效果，对此可以使用小程序的一个接口wx.getSystemInfo进行获取系统的高度，然后再动态绑定到map组件上。js代码如下：

//index.js
var