1. 程式人生 > >微信小程式 使用地圖(一) 獲取位置、移動選點、逆地址解析

微信小程式 使用地圖(一) 獲取位置、移動選點、逆地址解析

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  版權宣告:本文為博主原創文章,轉載請附上博文連結!