微信小程序 —— 地图上选择位置

发布时间:2019-06-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序 —— 地图上选择位置脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
需求分析: 一些小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化.今天我们就来看一下如何实现这个功能

具体实现

// index.wxML
// 显示位置信息(默认显示自动定位后的位置信息)
<view class='address' bindtap='onChangeAddress'>
  {{address}}
</view>
// 点击这块可以改变位置(改为自己确定后的地址)
// index.js
VAR QQMapWX = require('../../libs/qqmap-wx-jSSDk.js'); // 首先引入腾讯地图的API
var qqmapsdk;

Page({
  /**
   * 页面的初始数据
   */
  data: {
    address: "", // 地址信息
    src:"" ,
    m_latitude: null,
    m_longitude: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    /*
        判断是第一次加载还是从position页面返回
        如果从position页面返回,会传递用户选择的地点
        如果不是从position页面返回,而是第一次进入,则会自动定位用户的位置,显示用户的位置
    */
    if (options.address != null && options.address != '') {
      //设置变量 address 的值
      this.setData({
        address: options.address
      });
    } else {
      // 实例化API核心类
      qqmapsdk = new QQMapWX({
        //此key需要自己申请
        key: 'MNXBZ-G5TWD-GY...'
      });
      var that = this;
      // 调用接口
      qqmapsdk.reverseGeocoder({
        // 这里没有写location选项,是因为默认就是当前位置
        success: function (res) {
          // 获取默认下的地址
          that.setData({
            address: res.result.address
          });
        },
        fail: function (res) {
          //console.LOG(res);
        },
        complete: function (res) {
          //console.log(res);
        }
      });
    },
    // 点击跳转至
    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" style="width: 100%; height: 300px;" 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,//地图初次加载时的纬度坐标
    longitude: 0, //地图初次加载时的经度坐标
    name:"" //选择的位置名称
  },
  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'MNXBZ-G5TWD-GYF42-HHZJL-2W2J3-PvbX4'
    });
   
    this.moveToLocation();   
  },
  //移动选点
  moveToLocation: function () {
    var that = this;
    // 打开地图选择位置
    wx.chooseLocation({
      success: function (res) {  
        // res.name为地址名称  
        console.log(res.name);    
        //选择地点之后返回到原来页面
        wx.navigateTo({
          url: "/pages/index/index?address="+res.name
        });
      },
      fail: function (err) {
        console.log(err)
      }
    });
  }
});
切记要判断用户是否给与了位置信息的权限,提示用户给与权限哦

腾讯地图api

ok了~~

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序 —— 地图上选择位置全部内容,希望文章能够帮你解决微信小程序 —— 地图上选择位置所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。