登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

小程序地图之导航功能

发表在 2019-4-18 09:50 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 1 609

   

小程序地图之导航功能

小程序地图之导航功能
接着上一节《小程序地图之位置标注功能》介绍,本节介绍小程序导航功能。地图导航就是在地图上标注一个地方后,用户点击该地点后显示该地点相关信息后,可导航到该地点。
   地图导航是用的是wx.openLocation方法,通过该api可在地图上打开选择的地点,选择到这里去,地图会调用手机内的相关地图软件进行导航。
地图导航详细过程如下:
1、  标注地位位置,获取选中地理位置,详细功能这里就不说明了,有需要的可以查看上两篇文章了解。

小程序地图之导航功能

小程序地图之导航功能
(获取地理位置)

小程序地图之导航功能

小程序地图之导航功能
(选择地理位置)

小程序地图之导航功能

小程序地图之导航功能
(选择结果)
2、  添加导航事件。
   在页面中添加导航按钮,点击打开地址位置,进行导航
<button bindtap="toLocation">到这里去</button>
bindtap:是导航事件,通过点击该,调用wx.openLocation打开地图导航页面。
Page({
/**
   * 页面的初始数据
   */
  data: {
    localinfo:{}//标注地理位置经度和维度相关信息
  },
   toLocation:function(){
    var lk=this.data.localinfo;
    console.log(lk);
    wx.openLocation({
      latitude: lk.latitude,
      longitude: lk.longitude,
      scale: 18,
      address:lk.address,
      name:"测试地址"
    })
  }
})
效果如下:

小程序地图之导航功能

小程序地图之导航功能
点击【去这里】按钮,即可调用手机内的地图软件进行导航,
注意:手机一般要先下载好手机地图,例如:腾讯地图,百度地图,高德地图。

扫描二维码,手机查看本帖
254360258 发表于 2019-4-18 10:37:11 | 显示全部楼层
这是个人一系列的文章,支持楼主。
使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴