加油站会员管理小程序实战开发教程09-显示距离

我们上一篇讲解了如果调用地图API计算距离，我们本篇讲解一下如何显示到页面上，并且实现地图导航的功能。

在微搭中有一个概念叫数据绑定，实现的效果是将变量里的值显示到组件上。要想实现数据绑定，前提是要定义变量。

变量的定义方法是在应用编辑器的导航条点击变量

在中间的控制台里会出现新建变量的界面，点击新建变量

创建一个变量有变量名，变量类型，作用域几个选项。变量名需要起一个有意义的名字，通常起一个英文辨识度比较好，如果起拼音也可以，但是拼音因为汉语不是一个明确的语言，同样的拼音会有多重意思。

建议还是使用百度翻译把它翻译成英文比较稳妥。

变量的类型，以前的版本分为状态变量、参数变量、模型变量，新版本不这样分了，统一都是变量。类型一共有文字、数字、布尔值、数组和对象几种。如果我们需要调用数据源的，可以选择数组和对象两种类型。

我们起一个名字，加gassite，表示加油站的信息，类型呢选择对象。我们有几个属性，分别是经度、纬度和距离。

在技术世界里，描述这个对象的，我们叫JSON对象，语法是以一对儿大括号命名，里边的属性的语法是键：值，不同的属性用逗号分隔

定义好的对象如下: