微信小程序:高德API-PoI地址搜索

微信小程序:高德API-PoI地址搜索,在开始开发前有几步必要步骤:

1.进入高德地图API官网,登陆,开发支持-微信小程序SDK,控制台,应用管理,创建开发需要的key。注意:服务平台,必须是微信小程序。key用于什么开发就创建什么平台Key。

2.下载 amap-wx.js开发包,https://lbs.amap.com/api/wx/download

3.登录微信小程序公众平台,在 "设置"->"开发设置" 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去

完成以上步骤就可以开始了:

WXML:

<view class="section">

<input bindinput="bindInput" placeholder="搜索" focus="true" value='{{AddressName}}'/>

<button class='btn-Wc' size='mini' type='primary' bindtap='SetSession'>确定</button>

<!-- <view class='View_Bk'></view> -->

</view>

<view bindtouchstart="bindSearch" data-keywords="{{i.name}}" data-location="{{i.location}}" class="text_box" wx:for="{{tips}}" wx:for-item="i">

{{i.name}}

</view>

<view wx:if="{{AddressName==''}}">

</view>

<view wx:if="{{AddressName!=''}}">

<text>位置:{{AddressName}}\n经纬度坐标:{{AddressLocation}}</text>

</view>

WXSS:

/* pages/AMapWX/DHMap/DHMap.wxss */

.section{

height: 25px;

width: 100%;

}

.section input{

width:70%;

position: absolute;

left: 48rpx;

top: 18rpx;

border:1px solid #c3c3c3;

height:25px;

border-radius: 3px;

padding: 0 5px;

}

.text_box{

margin: 10px 25px;

border-bottom:1px solid #c3c3c3;

padding-bottom:10px

}

.btn-Wc{

margin-right: 10rpx;

position: absolute;

top: 16rpx;

right: 20rpx;

}

.img_Ss{

width: 60rpx;

height: 60rpx;

position: absolute;

top: 20rpx;

left: 10rpx;

}

JS:

var amapFile = require('../../lib/amap-wx.js');

var config = require('../../lib/config.js');

Page({

data: {

tips: {},

AddressName: '',

AddressLocation: ''

},

onLoad: function() {

},

bindInput: function(e) {

var that = this;

var keywords = e.detail.value;

var key = config.Config.key;

var Addresscity = wx.getStorageSync("Addressl")

var MyAmapFun = new amapFile.AMapWX({

key: '创建Key'

});

MyAmapFun.getInputtips({

keywords: keywords,

//city: Addresscity, //已使用机器当前位置编码 为优先搜索

location: '',

success: function(data) {

// console.log(data)

if (data && data.tips) {

that.setData({

tips: data.tips

});

}

}

})

},

bindSearch: function(e) {

console.log(e)

var keywords = e.target.dataset.keywords;

var location = e.target.dataset.location;

console.log(keywords);

console.log(location);

var that = this;

// var text = this.data.tips;

// console.log(text);

that.setData({

AddressName: keywords,

AddressLocation: location

})

// wx.setStorageSync("addressName", keywords)

},

})