微信小程式 使用地圖(一) 獲取位置、移動選點、逆地址解析
wxml:
<view class="page-body"> <view class="page-section page-section-gap"> <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location></map> </view> <view class="btn-area"> <button bindtap="moveToLocation" class="page-body-button" type="primary">移動位置</button> 選擇的位置: <view>位置:{{mobileLocation.address}}</view> <view>經度:{{mobileLocation.longitude}}</view> <view>緯度:{{mobileLocation.latitude}}</view>
</view> </view>
js:
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ data: { borderRadius : 5, latitude : 0, longitude: 0, markers: [], callout : { content: '預計還有10分鐘到達', bgColor: "#736F6E", color: "#ffffff", padding: 10, display: "ALWAYS", borderRadius: 5 }, mobileLocation : {//移動選擇位置資料 longitude : 0, latitude: 0, address: '', } }, onLoad: function () { // 例項化API核心類 qqmapsdk = new QQMapWX({ key: 'qq-map key' }); var that = this; //獲取位置 wx.getLocation({ type: 'gcj02',//預設為 wgs84 返回 gps 座標,gcj02 返回可用於wx.openLocation的座標 success: function(res) { console.log(res); var marker = [{ id: 0, latitude: res.latitude, longitude: res.longitude, callout: {//窗體 content: that.data.callout.content, bgColor: that.data.callout.bgColor, color: that.data.callout.color, padding: that.data.callout.padding, display: that.data.callout.display, borderRadius: that.data.callout.borderRadius }, }]; var mobileLocation = { latitude: res.latitude, longitude: res.longitude, }; that.setData({ latitude: res.latitude, longitude: res.longitude, markers: marker, }); //根據座標獲取當前位置名稱,顯示在頂部:騰訊地圖逆地址解析 qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: function (addressRes) { var address = addressRes.result.formatted_addresses.recommend; mobileLocation.address = address; console.log(address) //當前位置資訊 that.setData({ mobileLocation: mobileLocation, }); } }); } });
this.mapCtx = wx.createMapContext('qqMap'); }, //移動選點 moveToLocation: function () { var that = this; wx.chooseLocation({ success: function (res) { let mobileLocation = { longitude: res.longitude, latitude: res.latitude, address: res.address, }; that.setData({ mobileLocation: mobileLocation, }); }, fail: function (err) { console.log(err) } }); } }); --------------------- 作者:yi好快的刀 來源:CSDN 原文:https://blog.csdn.net/weixin_39461487/article/details/80028969?utm_source=copy 版權宣告:本文為博主原創文章,轉載請附上博文連結!