文本框输入关键字回车搜索附近地址（小程序）

最新推荐文章于 2022-12-28 15:42:56 发布

W_SSNY

最新推荐文章于 2022-12-28 15:42:56 发布

阅读量1w

点赞数

本文链接：https://blog.csdn.net/W_SSNY/article/details/90315290

版权

wxml

<view class='search'><input placeholder='请输入地址' value="{{value}}" bindconfirm='getShow'></input></view>
<view wx:for="{{list}}" wx:key="" wx:if="{{hasList}}">
    <view class='cont'>
        {{item.title}}
    </view>
</view>

wxss

.search{
  width: 100%;
  height: 100rpx;
  padding: 20rpx 60rpx;
  background: #f5f5f5;
  box-sizing: border-box;
}
input{
  background: #fff;
  width: 100%;
  height: 60rpx;
  border-radius: 30rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
.cont{
  width: 100%;
  padding: 30rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
  color: #999;
}

data: {
    list:[
      'wod srfjasekrfjsefr ',
      'sdfsafasdfsfsafds',
      'sdfsafdasdfsafdsa'
    ],
    hasList:false,
    value:''
  },
  getShow:function(e){
    // console.log(e)
    var that = this
    var value = e.detail.value
    console.log(value)
    qqmapsdk.getSuggestion({
      keyword:value,
      region:'石家庄',
      success:function(res){
        // console.log(res)
        var sug = []   //可以只取自己需要的东西
        for(var i = 0;i < res.data.length;i++){
          sug.push({
            title:res.data[i].title,
            id:res.data[i].title,
            addr:res.data[i].address,
            city:res.data[i].city,
            district:res.data[i].district,
            latitude:res.data[i].location.lat,
            longitude:res.data[i].location.lng
          });
        }
        that.setData({
          list:sug,
          hasList:true
        })
        // console.log(sug)
      },
      fail:function(error){
        console.log(error)
      }
    })
  },

此功能借助JavaScript SDK：https://lbs.qq.com/console/user_info.html 申请key等步骤，下载js插件