zoukankan      html  css  js  c++  java
  • 小程序--腾讯地图导航

    小程序点击地址导航功能首先必须去腾讯地图申请账号并开通权限

    地址:https://lbs.qq.com/dev/console/home

    第一步:

    申请完账号---------控制台---------应用管理-----------我的应用------------添加key。注:勾选请勿选错

    第二步:在开发者文档中下载sdk

     

     第三步:

      小程序引入sdk(存放位置不重要)

      第四步:

    app.json中需要添加获取地理位置的用途

    此处仅展示测试数据。在js中定义了。动态数据需要自己调用

    创建一个按钮

    <button bindtap="navigation">点击导航</button>
    // pages/map/map.js
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
    var qqmapsdk;
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        qqmapsdk = new QQMapWX({
          key: '填写刚申请的key'
      });
      },
      navigation(){
        qqmapsdk.geocoder({
          address: '江西省九江市九江学院', 
          complete: res => {
               console.log(res.result.location);   //经纬度对象 
               this.openMap(res.result.location.lat,res.result.location.lng,'九江学院','江西省九江市九江学院')
          }
        })
      },
      
      openMap: function (lat,lon,name,address) {
        wx.getLocation({
          type: 'gcj02', //默认为 wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标
          success: function (res) {
            wx.openLocation({//​使用微信内置地图查看位置。
              latitude: lat,//要去的纬度-地址
              longitude: lon,//要去的经度-地址
              name: name,
              address: address
            })
          }
        })
      },
    
    
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

      最终效果

     

    想要点击去这里的话需要在手机上真机调试测试

  • 相关阅读:
    HTML DOM 12 表格排序
    HTML DOM 10 常用场景
    HTML DOM 10 插入节点
    HTML DOM 09 替换节点
    HTML DOM 08 删除节点
    HTML DOM 07 创建节点
    022 注释
    024 数字类型
    005 基于面向对象设计一个简单的游戏
    021 花式赋值
  • 原文地址:https://www.cnblogs.com/ch94/p/15545623.html
Copyright © 2011-2022 走看看