利用关键字查找地理位置

这两天在玩map组件，发现map组件现在是越来越好玩了。各种炫酷的效果真的是太好玩了，因此在这里给大家分享一下

这是一个小程序的demo 

<!--pages/map/searchAddress/searchAddress.wxml-->

<view class='searchAddressContainer'>

<!-- title -->

<view class='title'>

<view class='city'>西安</view>

<view class='inputContainer'>

<input placeholder='您在哪上车' bindfocus='getFocusHandler' bindblur='setFocusHandler' bindinput='getKeyWord'> </input>

<image src="../../../images/user/icon-28.png" style='display:{{deleteShow?"block":"none"}}'></image>

</view>

<view class='delete'>取消</view>

</view>

<!--addressList -->

<view class='addressList' style='display:{{searchItemShow?"block":"none"}}'>

<view class='addressItem' wx:for="{{addressList}}" wx:key="{{addressList}}" wx:item="item" bindtap='getAddressHandler' data-index="{{index}}">

<view class='addressIcon'>

<image src="../../../images/user/icon-27.png"></image>

</view>

<view class='addressDetail'>

<view class='addressName'>{{item.title}}</view>

<view class='addressText'>{{item.address}}</view>

</view>

</view>

</view>

</view>

js

// pages/map/searchAddress/searchAddress.js

Page({

 

/**

* 页面的初始数据

*/

data: {

deleteShow:false,

searchItemShow:false,

addressList: [],

addressType:null

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

console.log(options.addressType);

this.setData({ addressType: options.addressType});

},

// getKeyWord 获取用户输入的关键字

getKeyWord:function(e){

console.log(e.detail.value);

const that=this;

wx.request({

url: 'https://apis.map.qq.com/ws/place/v1/suggestion/?region=西安', //根据经纬度转换成具体地址

data: {

"key": "YLFBZ-WHAWI-ZXUGH-53Q65-TOJ7E-ADBNQ",

"keyword":e.detail.value

},

method: 'GET',

// header: {},

success(res) {

console.log(res);

that.setData({ addressList:res.data.data});

},

fail: function () {

wx.showToast({

title: '请求失败',

})

},

complete: function () {

wx.showToast({

title: '请求成功',

})

}

})

},

// getFocusHandler input输入框获取焦点事件

getFocusHandler:function(){

this.setData({ deleteShow: true, searchItemShow:true});

},

// setFocusHandler input输入框失去焦点事件

setFocusHandler:function(){

this.setData({ deleteShow: false });

},

// getAddressHandler 选择地址

getAddressHandler:function(e){

console.log(e.currentTarget.dataset.index);

if (this.data.addressType==="startAddress"){

wx.setStorageSync(this.data.addressType, this.data.addressList[e.currentTarget.dataset.index]);

}else{

wx.setStorageSync(this.data.addressType, this.data.addressList[e.currentTarget.dataset.index]);

}

wx.navigateTo({

url: '../driverServer/driverServer',

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

wxss

/* pages/map/searchAddress/searchAddress.wxss */

page{

background:#f1f2f4;

font-size:"微软雅黑";

}

.title{

width:100%;

background:#fff;

height:90rpx;

display: flex;

justify-content: space-around;

font-size:30rpx;

line-height: 90rpx;

color:#555;

}

.inputContainer{

width:480rpx;

position: relative;

}

.inputContainer input{

width:440rpx;

height:64rpx;

margin-top:10rpx;

background: #f2f2f2;

border:2rpx solid #d2d2d2;

border-radius: 128rpx;

padding-left:40rpx;

}

.inputContainer image{

position:absolute;

top:27rpx;

right:10rpx;

width:32rpx;

height:32rpx;

z-index:1000;

}

.addressList{

width:710rpx;

background: #fff;

margin:20rpx auto;

min-height:688rpx;

}

.addressItem{

border-bottom:2rpx solid #d2d2d2;

display: flex;

height: 120rpx;

}

.addressIcon{

width:72rpx;

text-align: center;

}

.addressIcon image{

width:20rpx;

height:28rpx;

margin-top:50rpx;

}

.addressDetail{

height: 76rpx;

margin-top:22rpx;

}

.addressName{

font-size:28rpx;

color:#333;

}

.addressText{

font-size:22rpx;

color:#888;

}

希望大家能够喜欢

这个url是我申请的腾讯地图方可使用的组件

https://apis.map.qq.com/ws/place/v1/suggestion/?region=西安', //根据经纬度转换成具体地址

洗完宝宝们可以学会自己申请

http://lbs.qq.com/webservice_v1/guide-road.html#link-seven

这是路线规划

http://lbs.qq.com/index.html

这是腾讯地图网址