用高德地图写一个微信小程序SDK开发应用的例子。

接下来先看需求：

我们需要做的是根据用户输入的关键词给出相应的提示信息，并在列表中显示地名、地名的详细地址以及对应的经纬度坐标。当然，我们在UI方面也尽力做到理想的视觉和更好的用户体验。我们希望的最终效果是这样的，如下所示：

有了目标就可以直接编码了~我们先从高德开放平台获取微信小程序SDK和开发所需的密钥。完成一些基础工作后，我们先来规划页面布局。我们需要一个输入框供用户输入，还需要一个存储列表的容器来显示提示信息。

type=' text ' value=' { { input val } } ' bindinput='input ' placeholder='请输入搜索关键字'/input OK，让我们添加一个监控事件，bind input=' input '，来监控用户的键盘输入。接下来，让我们为列表制作一个容器。

view class=' list ' view class=' list-item ' wx : for=' { { search list } } ' view class=' title“{ item . name } }/view view class=' address“{ item . district } } { { item。address}}/view/view/view在对高德接口的下一次调用中，我们将从接口获取一个数组，并将这个数组分配给searchList，因此我们需要为容器中的列表项添加一个for循环。这样，我们才能达到预期的效果。然后我们为输入框绑定的监听事件添加相应的方法。

Input3360函数(e) {this。setdata ({inputVal3360e。detail.value}}同时将输入的关键词分配给InputVal，这样我们就可以看到在页面上输入的单词。得到输入关键字后，我们可以将关键字作为参数传递给高德提供的接口，这样它就可以返回数据了。我们编写一个公共方法来封装调用接口方法。

//介绍高德微信小程序SDK var a mapfile=require(' AMAP-wx . js ')；//Search关键字关键字： function(){ var myama pfun=new a mapfile . amapwx({ key 3360 ' Gao Dekey ' })，即=thisAmapfun。GetInputTips({ keywords : ' keywords '，location : ' '，Succe:函数(data){ if(data data . tips){//将数据分配给searchlist that . setdata({ searchlist 3360 data . tips })；} } });}至此，我们已经写好了接口逻辑，现在将整个流程打通；为了提升用户体验，在用户输入关键词时触发搜索，并实时返回结果。

input:函数(e){ this . setdata({ input val : e . detail . value })；//将this.keyword(e.detail.value)作为搜索关键字的方法添加到被监控的方法中；}这样，只要用户输入关键词，就可以实时获得返回的结果。我们从界面中提取所需的数据，并将其显示在页面上。