微信小程序:高德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)
},
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM