微信小程式:高德API-PoI地址搜尋
阿新 • • 發佈:2018-11-17
在開始開發前有幾步必要步驟:
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) }, })
效果圖:
下章整合定位,搜尋,路線規劃。