微信小程序引用高德获取输入提示词

news/2024/7/20 4:07:41 标签: 小程序

效果图

高德地址:https://lbs.amap.com/api/wx/guide/get-data/get-inputtips

js文件

var amapFile = require('../../lib/amap-wx.js');  //引入高德js
var config = require('../../lib/config.js');      //引用我们的配置文件
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
    })
    console.log(e);
  }
})

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>

wxss文件

.section{
  height: 30px;
  width: 100%;
}
.section input{
  width:90%;
  margin:5px auto;
  border:1px solid #c3c3c3;
  height:30px;
  border-radius: 3px;
  padding: 0 5px;
}
.text_box{
  margin: 10px 25px;
  border-bottom:1px solid #c3c3c3;
  padding-bottom:10px
}


http://www.niftyadmin.cn/n/886327.html

相关文章

微信小程序——分割线

水平分割线 1、(.wxml&#xff09; <view class"container"><view class"heng"></view> </view> 2、&#xff08;.wxss&#xff09; .heng{background: #E0E3DA;width: 100%;height: 5rpx;} 垂直分割线 1、&#xff08;.wxm…

微信小程序——点击列表里某元素,实现跳转+显示点击元素的内容

最近刚刚学微信小程序没多久&#xff0c;碰到了很多问题&#xff0c;这也是我碰到的一个问题。 思路&#xff1a;①跳转——组件绑定一个点击事件&#xff0c;在事件里面实现跳转 ②显示点击元素的内容——获取点击元素在列表里面的id&#xff0c;但是我发现我获取到的id是空的…

微信小程序实现监听wx.navigateTo的返回按钮

由a页面跳转到b页面&#xff0c;在由b页面返回到a页面。&#xff08;实现监听的原因&#xff1a;有时候我们在b页面做了相关的操作&#xff0c;而在b页面点击返回时我们要将a页面的数据做相应的改变&#xff09; app.json App({globalData: {show:false,//利用这个变量实现监听…

微信小程序——给数组增加一个属性并赋值

前言&#xff1a;有时候我们通过一系列操作获得了一个数组&#xff0c;但给数组缺少了我们想要的一个属性&#xff08;或者字段&#xff09;&#xff0c;那我们就会想给他增加一个属性&#xff08;卑微的打工人&#xff09; 废话不多说&#xff0c;开始干活&#xff01; 我的需…

微信小程序——点击某个按钮实现下面弹窗的出现

效果图:(真的是图) wxml(代码里面有解释&#xff09; <button type"primary" bindtap"Popup">点我</button> <!--点击后灰色背景的设置--> <view wx:if"{{now_state}}" class"background" bindtap"hideM…

微信小程序——在view组件中实现强制换行

css强制换行和超出隐藏实现 - 念时 - 博客园

Tomcat的配置(从下载配置完成)

一、下载 tomcat下载链接&#xff1a;Apache Tomcat - Welcome! 点击后是下面的样子。现在我们选择下载版本 这里我们选择9.0.53的Tomcat&#xff08;其中建议选着zip的&#xff0c;因为解压即可。&#xff09; 我这里下载解压后是这样的 二、配置系统变量 ①打开我的电脑-…

idea下面javaweb项目的创建+发布项目到本地的Tomcat上面

一、idea下面创建javaweb项目 new---->project 先创建一个普通的java项目 右击项目选择Add Framework Support 选着JavaEE 选择Web Application 同时勾选 Create web.xml ,点击OK&#xff0c;这样我们的javaweb项目就创建好了。 此时我们可以看到它和普通java项目的不…