精华内容
下载资源
问答
  • 小程序地址导航
    千次阅读
    2019-11-21 17:25:13

    因为最近小程序项目需要,实现一个点击酒店的名称(地址)然后唤起手机的地图软件,实现导航的功能。

    如样图:

    微信小程序这边提供的接口:官方文档在这 

    属性 类型 默认值 必填 说明
    latitude number   纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
    longitude number   经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系
    scale number 18 缩放比例,范围5~18
    name string   位置名
    address string   地址的详细说明
    success function   接口调
    更多相关内容
  • 微信小程序地址导航功能实现详解

    千次阅读 2020-04-03 08:52:58
    微信小程序地址导航功能 1. 微信小程序地址导航功能通过点击地址或者导航来调用微信小程序自带的api来获取到自己的位置,并且进行跳转,然后再在新的页面里打开外部程序,例如高德地图或者百度地图,打开之后会自动...

    微信小程序地址导航功能

    1. 微信小程序地址导航功能通过点击地址或者导航来调用微信小程序自带的api来获取到自己的位置,并且进行跳转,然后再在新的页面里打开外部程序,例如高德地图或者百度地图,打开之后会自动出现导航页面,不过需要提前设置好目的地,因为没有请求,所以我是直接写死的,一会儿会说如果是请求来的应该怎么做。

    2. 首先需要在app.json文件里声明permission字段,因为开发者需要填写获取用户地理位置的用途说明,如果不写则会出现如下图的弹框:
    在这里插入图片描述
    声明promission字段需要在app.json中的第一个大括号里面声明,代码如下:

     "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
      }
    

    3. 接下来则需要在wxml里写了,代码如下:

    <view bindtap="onGuideTap" data-latitude='35.41408' data-longitude='114.066224' data-bankName='新乡医学院'  style="margin-top:30rpx">
    	<image style="width:36%;height:110rpx;" class="mix" src="/image/导航.png"></image>
    	<view><text>地图导航</text></view>
    </view>
    

    因为我写的是样式是点击这个图片或者字,可以跳转到导航页面,当然也可以写其他方法,只要将view后边的写上去就行了,上边的代码,其中bindtap就是一个事件,当点击地图导航的时候,会执行这个函数,来跳转到导航页面,后边的data-latitude和data-longitude都是即将要导航到那里的经纬度,后边的名称。

    4.接下来就是wxjs文件了,代码如下:

     onLoad: function(options) {
        var that = this
        //获取当前的地理位置、速度
        wx.getLocation({
          type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
          success: function (res) {
            //赋值经纬度
            that.setData({
              latitude: res.latitude,
              longitude: res.longitude,
            })
          }
        })
      },
      bindcontroltap(e) {
        var that = this;
        if (e.controlId == 1) {
          that.setData({
            latitude: this.data.latitude,
            longitude: this.data.longitude,
            scale: 14,
          })
        }
      },
       onGuideTap: function (event) {
        var lat = Number(event.currentTarget.dataset.latitude);
        var lon = Number(event.currentTarget.dataset.longitude);
        var bankName = event.currentTarget.dataset.bankname;
        console.log(lat);
        console.log(lon);
        wx.openLocation({
          type: 'gcj02',
          latitude: lat,
          longitude: lon,
          name: bankName,
          scale: 28
        })
      },
    

    注:运行的时候需要在手机上调试,才可以看出效果

    展开全文
  • 主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 (三)tabBar底部导航详细介绍的相关资料,需要的朋友可以参考下
  • 本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见github,请点击地址 (本地下载),其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,...
  • 我们知道微信小程序中设置导航条可以直接在json文件中设置 "navigationBarTitleText" = "String" 就可以了  但是我们有时可能需要根据不同的情况动态设置导航条。 微信小程序给我们提供了一个方法   ...
  • 主要介绍了微信小程序 flex实现导航实例详解的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下
  • 主要介绍了微信小程序实现定位及到指定位置导航的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今日给大家分享一下如何实现导航栏(nav)和内容部分上下联动(相关代码模块我已单独整理放到github上面了,欢迎前来start)。 github地址:https://github.com/sunshime/weChatSkill 一、效果图: 二、实现过程: ...
  • 微信小程序底部导航

    千次阅读 2022-02-17 11:57:16
    注意:对于底部导航栏,添加的导航最少两个,最多五个。 代码:在根目录下找到app.json文件 { "pages": [ "pages/order/order", "pages/index/index", "pages/demo/demo", "pages/login/login", "pages...

    例:

    注意:对于底部导航栏,添加的导航最少两个,最多五个。

    代码:在根目录下找到app.json文件

    {
      "pages": [
        "pages/order/order",
        "pages/index/index",
        "pages/demo/demo",
        "pages/login/login",
        "pages/logs/logs"
       
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#808080",
        "navigationBarTitleText": "test",
        "navigationBarTextStyle": "white"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json",
      "lazyCodeLoading": "requiredComponents",
      "tabBar": {
        "list": [
          {
            "selectedIconPath": "pages/images/1.png",
            "iconPath": "pages/images/1.png",
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "selectedIconPath": "pages/images/2.png",
            "iconPath": "pages/images/2.png",
            "pagePath": "pages/login/login",
            "text": "我的"
          }
        ]
      }
    }

     其中各属性的意思

    tabBar  指底部的 导航配置属性

    list   导航配置数组

    selectedIconPath 选中时 图标路径

    iconPath 未选择时 图标路径

    pagePath 页面访问地址

    text  导航图标下方文字

    注意:

    这个页面的注册一定要注意,第一个一定是要是最先显示的,否则会出现底部导航看不到
    展开全文
  • 应用场景:多家门店,门店地址从后台上传,地址信息各不相同。然后点导航导航过去 第一种情况:后台返回的门店信息包含经纬度 (这种就不需要申请腾讯地图Key) catchNav(e) { var item = e.currentTarget...

     应用场景:多家门店,门店地址从后台上传,地址信息各不相同。然后点导航要导航过去

    第一种情况:后台返回的门店信息包含经纬度 (这种就不需要申请腾讯地图Key)

    catchNav(e) {
        var item = e.currentTarget.dataset.item;
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            wx.openLocation({
              latitude: Number(item.lat),
              longitude: Number(item.lng),
              name: item.title,
              address: item.addr
            })
          }
        })
    }

    第二种:后台只提供门店地址信息

     

     2.1:首先第一步去腾讯地图申请Key,腾讯位置服务-小程序

    之后就按照操作步骤来就行

    2.2:在小程序上使用

    首先你得下载qqmap-wx-jssdk.js这个文件

    //引入文件
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
    var keys = new QQMapWX({
      key: '你申请的密钥'
    });
    
    Page({
    
        //地址导航
      catchNav(e) {
        var item = e.currentTarget.dataset.item;
        keys.geocoder({  //根据输入的地址逆解析出经纬度并跳转地图导航
          address: item.addr,
          success: res => {
            var lat = res.result.location.lat;
            var lng = res.result.location.lng;
            wx.getLocation({
              type: 'wgs84',
              success: function (res) {
                wx.openLocation({
                  latitude: Number(lat),
                  longitude: Number(lng),
                  name: item.title,
                  address: item.addr
                })
              }
            })
          }
        })
        
      }
    
    })
    

     最终:

    展开全文
  • 最近研究了微信小程序地图功能,编写了地图导航功能的Demo(文章尾部附有源码下载地址)。 1.用户定位功能:用户同意小程序获取位置权限,并定位用户当前位置; 2.选择目的地,并开始自动导航功能 2.选择交通工具...
  • 微信小程序导航

    千次阅读 2022-02-01 16:54:34
    微信小程序导航 声明式导航 在页面上声明一个 navigator 导航组件通过点击 navigator 组件实现页面跳转 导航到 tabBar 页面 tabBar 页面指的是被配置为 tabBar 的页面。 在使用 navigator 组件跳转到指定的 tabBar...
  • 微信小程序-页面导航

    千次阅读 2022-01-25 12:29:12
    小程序实现页面导航的两种方式 ①声明式导航 ·在页面上声明一个<navigator>导航组件 ·通过点击<navigator>组件实现页面跳转 在使<navigator>组件跳转到指定的tabBar页面时,需要指定url...
  • 微信小程序—地图导航(点击地址,可以进行导航) // 地图 getLocation(e){ var that = this, address = e.currentTarget.dataset.address; wx.getLocation({ //定位类型 wgs84, gcj02 type: 'gcj02', ...
  • 小程序实现地图导航功能

    千次阅读 2021-07-12 19:34:38
    小程序实现地图导航功能app.json获取导航授权信息wxml文件中命令map组件基本命令以及作用js文件中命令1.在data中设置地图界面显示的经纬度2.在data中设置标记点宽高经纬度3.标记点点击的回调函数getLocation获取当前...
  • 微信小程序设置底部导航

    千次阅读 2021-06-04 06:16:17
    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家。 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。 我们先来看个效果图 这里,我们添加了三个...
  • 我们只需要做好如下几点就可以了: 一、使用小程序内置方法拉起微信内置地图 二、使用腾讯的微信小程序 JavaScript SDK 进行地址名称 ==> 经纬度 的转换 三、使用微信内置API传递获取到的坐标值,使拉起导航能够正常...
  • 微信小程序 - - 地图及导航

    千次阅读 多人点赞 2021-11-12 18:58:26
    3.获取小程序的AppID 4.在腾讯位置服务上创建一个应用 5.配置key 6.代开HbuilderX创建一个项目 7.将项目运行到小程序模拟器(HBuilder连接微信开发者工具) 注意:需要提前将微信开发者工具的服务
  • 小程序首页的轮播图、导航、间隔、入口,练习练习练习练习
  • 微信小程序实现底部导航

    千次阅读 2020-12-16 14:08:24
    实现小程序底部导航Tabbar 对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。 废话不多说,上代码: 首先找到这个文件 我先介绍这些都是干什么用的 tabBar 指底部的 导航配置属性 color 未...
  • uniapp微信小程序实现地图导航

    千次阅读 2021-06-07 19:19:03
    handleMapLocation() { console.log('进入导航') // 经纬度暂时写死,后面介入数据 let latitude = Number(30.xxxx); let longitude = Number(114.xxxx); let address='武汉xxx' // .
  • 小程序自定义导航栏,胶囊对齐

    千次阅读 2021-04-18 17:30:29
    最近在做一个小程序项目,要求自定义导航栏,自定义导航栏好说,但是想要胶囊对其就没那么简单了 官方也没有给出具体的做法,然后上百度,最终将实现代码给有类似困扰各位同猿分享 实现效果图 iPhone 5 iPhone 6...
  • 因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度。 首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。 腾讯地图经纬度查询:...
  • 微信小程序实现到指定位置导航

    千次阅读 2020-12-17 15:10:40
    1.wxml {longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" show-location > 2.wxss page { ...终于实现了微信小程序实现到指定位置的导航 参考网址:https://www.jb51.net/article/167975.htm
  • 小程序学习笔记5---导航跳转

    千次阅读 2022-02-07 10:11:48
    导航跳转一、页面导航1、页面导航分类2、声明式导航2.1、跳转到tabBar页面2.2、跳转到非tabBar页面2.3、后退导航3、编程式导航3.1、跳转到tabBar页面...调用小程序导航API,实现页面跳转 2、声明式导航 2.1、跳转到
  • 在进入小程序的时候我就获取了地理位置了,所以直接在地址的位置加点击事件即可 uni.openLocation({ latitude: lat, //要去的纬度-地址 longitude: lng, //要去的经度-地址 name: name, address: address })
  • 许多人都认为小程序系统的...小程序中自定义底部导航是非常不明确的选择,小编有发布过一篇《说一说要求 小程序自定义导航栏 的产品有多沙雕》,文章地址:https://blog.csdn.net/u013350495/article/details/105645..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,130
精华内容 28,852
关键字:

小程序地址导航