微信小程序使用腾讯地图

编程入门 行业动态 更新时间:2024-10-28 16:17:49

微信小程序使用腾讯地图

方法

第一步:登录或者注册腾讯地图官方(地址:https://lbs.qq/)

第二步:在创建sdk;

创建方法:进入控制面板后显示创建sdk,点击之后输入名称和选择应用场景后点击设置选择web和小程序后输入APPID后点击确定就好。

第二步:在微信小程序开发管理页面里面的域名管理里面输入合法域名:(https://apis.map.qq)就提交就可以。

第三步:在腾讯地图官方网站上下载相关的sdk 就可以。

第四步:在下载的压缩文件夹里面找到(qqmap-wx-jssdk.js)文件引入到相关页面。

引入方法:(index.js文件来描述)

// 引入进来腾讯地图的sdk
var address = require('../../components/address/qqmap-wx-jssdk');
var myaddres;

使用方法:

第一步:

  data: {
    adress:'未获取您的位置',
  },
  /**
   * 提高腾讯地图来获取当前位置
   */
  AddressLocation(){
    // new address 是获取上面的路径(var address = require('../../components/address/qqmap-wx-jssdk');)
    var myaddress = new address({ key: '4RQBZ-K6JA5-VKWIH-I6LK2-7NV53-UAFM2' });
    myaddress.reverseGeocoder({
      success: (res)=>{
        this.setData({
          adress:res.result.address_reference.landmark_l2.title
        })
      }
    })
    let adress = this.data.adress
  },
/**
	下面调用获取地址:
*/
onLoad: function (options) {
    var that = this;
    that.AddressLocation();
  },    

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9dUPTSw-1680339800754)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230401164948835.png)]

微信小程序使用高德地图

方法

第一步:登录或者注册高德地图官方(地址:https://lbs.amap/)

第二步:在创建sdk;

创建方法:进入控制面板后显示创建sdk,点击之后输入名称和选择应用场景后点击设置选择web和小程序后输入APPID后点击确定就好。

第二步:在微信小程序开发管理页面里面的域名管理里面输入合法域名:(https://restapi.amap)就提交就可以。

第三步:在腾讯地图官方网站上下载相关的sdk 就可以。

第四步:在下载的压缩文件夹里面找到(qqmap-wx-jssdk.js)文件引入到相关页面。

引入方法:(index.js文件来描述)

// 引入进来腾讯地图的sdk
var address = require('../../components/address/qqmap-wx-jssdk');
var myaddres;

使用方法:

第一步:

  data: {
    adress:'未获取您的位置',
  },
  /**
   * 提高腾讯地图来获取当前位置
   */
  AddressLocation(){
    // new address 是获取上面的路径(var address = require('../../components/address/qqmap-wx-jssdk');)
    var myaddress = new address({ key: '4RQBZ-K6JA5-VKWIH-I6LK2-7NV53-UAFM2' });
    myaddress.getRegeo({
      success: (res)=>{
        this.setData({
          adress:res.result.address_reference.landmark_l2.title
        })
      }
    })
    let adress = this.data.adress
  },
/**
	下面调用获取地址:
*/
onLoad: function (options) {
    var that = this;
    that.AddressLocation();
  },  

onLoad: function (options) {
    var that = this;
    that.AddressLocation();
  },    

本次的笔记到此为止。

更多推荐

微信小程序使用腾讯地图

本文发布于:2023-06-19 21:54:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/791795.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:腾讯   地图   程序   微信小

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!