小程序的定位(获取地址描述数据)以及获取输入提示词(结合高德地图)

地址逻辑

小程序的定位(获取地址描述数据)以及获取输入提示词

高德开放平台:https://lbs.amap.com/api/wx/guide/get-data/get-inputtips

小程序的定位(获取地址描述数据)

1.首先获取密钥(到高德控制台申请键)

2.在页面的js文件中,实例化AMapWX对象,处理搜索数据。

首先,引入amap-wx.js文件(amap-wx.js从相关下载页面下载的zip文件解压后得到)。

页({

  onLoad:function(){

    var that = this;

    var myAmapFun = new amapFile.AMapWX({key:'高德Key'});

    myAmapFun.getRegeo({

      成功:函数(数据){

        //成功回调

      },

      失败:function(info){

        //失败回调

        执行console.log(信息)

      }

    })

  },

})

获取输入提示词(搜索框)

实现输入提示功能的步骤如下:

1、在页面的 js 文件中,实例化 AMapWX 对象,处理搜索数据。

首先,引入 amap-wx.js 文件(amap-wx.js  从相关下载页面下载的 zip 文件解压后得到)。

Page({

  data: {

    tips: {}

  },

  onLoad: function(){

  },

  bindInput: function(e){

    var that = this;

    var keywords = e.detail.value; 

    var key = config.Config.key;

    var myAmapFun = new amapFile.AMapWX({key: '高德Key'});

    myAmapFun.getInputtips({

      keywords: keywords,

      location: '',

      success: function(data){

        if(data && data.tips){

          that.setData({

            tips: data.tips

          });

        }

      }

    })

  },

  bindSearch: function(e){

    var keywords = e.target.dataset.keywords;

    var url = '../poi/poi?keywords=' + keywords;

    console.log(url)

    wx.redirectTo({

      url: url

    })

  }

})

2、编写页面的 wxml 文件,搭建页面结构。

WXML

<view class="section">
  <input bindinput="bindInput" placeholder="搜索" focus="true" />
</view>
<view bindtouchstart="bindSearch" data-keywords="{{i.name}}" class="text_box" wx:for="{{tips}}" wx:for-item="i">
  {{i.name}}
</view>

猜你喜欢

转载自blog.csdn.net/chenkeyu1997/article/details/83274620