需求分析： 一些小程序打開后，以文字形式顯示用戶所在位置，如果用戶覺得不準(zhǔn)，可以打開地圖，在地圖上自己選擇位置，選擇完成后，顯示的用戶的位置會(huì)發(fā)生變化.今天我們就來看一下如何實(shí)現(xiàn)這個(gè)功能

插件下載：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

具體實(shí)現(xiàn)

// index.wxml
// 顯示位置信息（默認(rèn)顯示自動(dòng)定位后的位置信息）
<view class='address' bindtap='onChangeAddress'>
  {{address}}
</view>
// 點(diǎn)擊這塊可以改變位置（改為自己確定后的地址）

// index.js
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); // 首先引入騰訊地圖的API
var qqmapsdk;

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    address: "", // 地址信息
    src:"" ,
    m_latitude: null,
    m_longitude: null
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {

    /*
        判斷是第一次加載還是從position頁面返回
        如果從position頁面返回，會(huì)傳遞用戶選擇的地點(diǎn)
        如果不是從position頁面返回，而是第一次進(jìn)入，則會(huì)自動(dòng)定位用戶的位置，顯示用戶的位置
    */
    if (options.address != null && options.address != '') {
      //設(shè)置變量 address 的值
      this.setData({
        address: options.address
      });
    } else {
      // 實(shí)例化API核心類
      qqmapsdk = new QQMapWX({
        //此key需要自己申請(qǐng)
        key: 'MNXBZ-G5TWD-GY...'
      });
      var that = this;
      // 調(diào)用接口
      qqmapsdk.reverseGeocoder({
        // 這里沒有寫location選項(xiàng)，是因?yàn)槟J(rèn)就是當(dāng)前位置
        success: function (res) {
          // 獲取默認(rèn)下的地址
          that.setData({
            address: res.result.address
          });
        },
        fail: function (res) {
          //console.log(res);
        },
        complete: function (res) {
          //console.log(res);
        }
      });
    },
    // 點(diǎn)擊跳轉(zhuǎn)至
    onChangeAddress: function (e) {
        wx.navigateTo({
          url: "/pages/position/position"
        });
      }
  }

// position.wxml
<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="qqMap" latitude="{{latitude}}" longitude="{{longitude}}" show-location></map>
  </view>
</view>

// position.js
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  data: {
    latitude: 0,//地圖初次加載時(shí)的緯度坐標(biāo)
    longitude: 0, //地圖初次加載時(shí)的經(jīng)度坐標(biāo)
    name:"" //選擇的位置名稱
  },
  onLoad: function () {
    // 實(shí)例化API核心類
    qqmapsdk = new QQMapWX({
      key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PVBX4'
    });
   
    this.moveToLocation();   
  },
  //移動(dòng)選點(diǎn)
  moveToLocation: function () {
    var that = this;
    // 打開地圖選擇位置
    wx.chooseLocation({
      success: function (res) {  
        // res.name為地址名稱  
        console.log(res.name);    
        //選擇地點(diǎn)之后返回到原來頁面
        wx.navigateTo({
          url: "/pages/index/index?address="+res.name
        });
      },
      fail: function (err) {
        console.log(err)
      }
    });
  }
});

切記要判斷用戶是否給與了位置信息的權(quán)限，提示用戶給與權(quán)限哦

轉(zhuǎn)自：https://segmentfault.com/a/1190000014833073

總結(jié)

以上是生活随笔為你收集整理的微信小程序 —— 地图上选择位置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。