关于微信小程序连接腾讯地图的介绍

关于微信小程序连接腾讯地图的介绍

直接上代码

var global = getApp();
var o = global.globalData.siteInfo.siteUrl;
var i = require("../../common/common.js");
var QQMapWX = require(‘../../utils/qqmap-wx-jssdk.min‘);
var qqmapsdk;
  onLoad: function (k) {

    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: ‘P7DBZ-V7MC4-OQBUH-X36F6-35YKH-BLBUQ‘
    });
  },onShow: function () {
    // 调用接口
    var that = this;
    wx.getLocation({
      type: ‘gcj02‘,
      altitude: ‘true‘,
      success: function (res) {
        console.log(res)
        //2、根据坐标获取当前位置名称,显示在顶部:腾讯地图逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          }, //坐标
          get_poi: 0, //是否获取坐标对应附近列表
          poi_options: ‘policy=2;radius=3000;page_size=10;page_index=1‘, //poi 参数
          success: function (res) {
            var address = res.result.address_component;
            console.log(res.result.address_component, "???????????")
            that.setData({
              province:address.province,
              city:address.city,
            });
            if(that.data.province != null && that.data.city != null) {
              wx.request({
                url: o + "API/IndexMini/get_local",
                data: {
                  applet_id: global.globalData.uniacid,
                  city: address.city[0] + address.city[1]
                },
                success: function (e) {
                  console.log(e.data.data, "11111111111");
                  that.setData(
                    {
                      your_city: e.data.data
                    }
                  )
                }

              })
            }

          }
        })
      }
    });
   },

最后千万不要忘记了在微信的管理工具中添加上腾讯地图的接口地址

https://apis.map.qq.com

原文地址:https://blog.51cto.com/14263015/2418500

时间: 2024-10-11 02:38:19

关于微信小程序连接腾讯地图的介绍的相关文章

微信小程序腾讯云php后台解决方案

微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)config.js /** * 小程序配置文件 */ // 此处主机域名修改成腾讯云解决方案分配的域名 var host = 'https://vqp8djdy.qcloud.la'; var config = { // 下面的地址配合云端 Demo 工作 service: { host, // 登录地址,

用微信小程序连接WordPress网站

随着微信小程序的功能越来越强,特别对个人开发者的开放,让个人开发者有机会尝试微信小程序.如果你有自己的个人网站,就可以把个人网站搬到微信小程序里,通过小程序直接访问网站的内容. 要想微信小程序可以获取网站的内容,这就要求网站提供web服务的api,比如提供获取内容的json api,这些api包括查询.添加.更新等操作.我的网站是使用WordPress 4.7.4 版本,提供REST API,这样就不用自己开发api了,直接使用即可.条件具备,说干就干,我先拿自己的网站练手,也算是真正动手实践一

微信小程序的尺寸单位rpx介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)iPhone5      1rpx = 0.42px     1px = 2.34pxiPhone6      1rpx = 0.5px 1px = 2rpxiPhon

微信小程序开发02-小程序基本介绍

前言 前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来: [组件化开发]前端进阶篇之如何编写可维护可升级的代码(有些晦涩有些乱,但是对于整体了解小程序结构有帮助) 我们用小程序实现这里的代码,看看是个什么样的体验,另外我这里想保证代码最大程度重用,为后续一端代码四端运行做前驱探索. 页面复杂度还是比较高的,包括了: ① 弹出层 ② 页面跳转 ③ 缓存 ④ 数据请求 ⑤ 列表页.滚动分页 ⑥ .

微信小程序腾讯云环境搭建

一.需要有微信公众号 这一步不多说了,百度搜索微信公众号注册. 二.申请小程序账号 (下面选自https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html#编译预览) 开发小程序,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 跟随这个教程,开始你的小程序之旅吧! 申请帐号 点击 https://mp.weixin.qq.com/wxopen/waregister?action=st

微信小程序连接Tornado

自己搭建Tornado 监听8000端口, 提供给小程序访问的地址为http://127.0.0.1:8000/index #!/usr/bin/env python # -*- coding:utf-8 -*- import tornado.ioloop import tornado.web class MainHandler(tornado.web.RequestHandler): def get(self): print('GET方式请求成功') self.write("123"

微信小程序连接Java后台

前端时间有人问我小程序怎么连接后台,这里直接贴代码 在app.js里 // api request request(url, params) { return new Promise((resolve, reject) => { wx.request({ url: baseUrl + url, method: 'POST', data: params, success(res) { console.log(res.data) resolve(res.data) }, fail(res) { co

微信小程序实现地图插件的调用方法

目前很多微信小程序都具备地图查看的功能,那么对于在微信小程序中如何实现地图插件的调用方法,可能很多初学小程序开发的技术人员还存在很多疑问,那么下面就来跟大家详细解答一下. 首先肯定是借助小程序自带的map组件 .wxml代码: <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}&qu

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微