欢迎光临,了解微信小程序开发,就上易用通!

阿东入门系列《六》微信小程序map地图,页面跳转

发布:2018-02-03 11:23浏览: 来源:网络 作者:cola

一:Map组件

今天打算继续写一下这个系列的文章,因为17年1月9号微信小程序就要正式上线了,为了赶这波热潮,打算把本系列上篇文章的demo,《附近三公里》当做一个正式版发布。

然而悲催的事情总是这么多,打开工具的时候,发现微信做了几次升级,而我们之前跑的好好的项目,个别功能居然跑不起来了,没办法,继续采坑吧,这里先介绍一下这个版本上地图的变化。

如果看过我这个系列的文章的话,你可能还记着,在写上篇文章的时候,微信提供了一个js的方法,调用一下就直接打开了微信内置的地图,但是这个版本上,这个功能被改了!被改了!被改了!

这个版本(小程序刚出,有些东西难免会有改动,这里所讲的也只能说基于这个版本,至于下一个版本会不会改,谁都说不好)地图被抽出成一个组件map。这里不得不说一句,本版本的map,开放的功能接口还是太少,有很多效果都不能达到。

组件 map

下面来自官方文档

阿东入门系列《六》微信小程序map地图,页面跳转(图1)

我们可以通过设置中心经纬度来设置地图中心点。设置scale 来设置地图的缩放层级。markers,polyline,circles,都接受一个点的集合,来显示不同的样式。controls允许我们以相对布局的方式设定一系列的控件,并通过bindcontroltap属性绑定事件。

官方文档对各个属性都有很详细的介绍,请移步。

下面把我的demo中地图的page,贴出来给大家当一个例子,好好看看可以避免很多我踩过的坑。

<!-- map.wxml -->
<map 
    id="map" 
    longitude="{{lng}}" 
    latitude="{{lat}}" 
    scale="14" 
    show-location="{{true}}"
    markers="{{markers}}" 
    bindmarkertap="markertap" 
    polyline="{{polyline}}" 
    bindregionchange="regionchange" 
    show-location style="width: 100%; position:absolute;top:0;bottom:0;height:auto;">
</map>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
// map.js
//获取应用实例
var app = getApp()
Page({
  data: {
    lng: 0,
    lat: 0
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  onLoad: function (options) {

    this.setData({
      lng: app.globalData.longitude, // 全局属性,用来取定位坐标
      lat: app.globalData.latitude,
      markers: [{
        iconPath: "/image/03.png",
        id: 0,
        latitude: options.lat, // 页面初始化 options为页面跳转所带来的参数 
        longitude: options.lng,
        width: 20,
        height: 20
      }],
      polyline: [{
      points: [{
          longitude: app.globalData.longitude,
          latitude: app.globalData.latitude
        }, {
          longitude: options.lng,
          latitude: options.lat
        }],
        color: "#FF0000DD",
        width: 20,
        dottedLine: true
      }]
    })
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

这个页面本来笔者是打算做一个导航的,前一个页面传进来一个坐标和自己的定位坐标做一个路线的规划,但是map 并没有给我们提供这个接口,唯一搭点边的只有 polyline 属性,但是,这个属性连起来的是直线!是直线!是直线!你不能指望着你的客户,拿着你的小程序,在地图上按直线给过去吧。

后来,我有研究了一下用js版的百度地图嵌套,发现然并卵,可能笔者功力不够,没找到怎么把百度的js引到小程序里面,所以这个功能并不是很好用。

二:页面跳转

这里记录一下小程序中页面跳转的方式。

从跳转的方式(或说成打开新页面的方式)来说大致可分为:请求转发请求重定向 和 TAB页跳转(有过web经验的话,应该很清楚两种方式的区别),部分出自官方文档。

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

阿东入门系列《六》微信小程序map地图,页面跳转(图2)

注意点:小程序中要求页面的层级最多只能有五层,因为这种方式保留当前页面,也就是说以这种方式跳转页面,最多只能打开5个页面。


wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

阿东入门系列《六》微信小程序map地图,页面跳转(图3)


wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

阿东入门系列《六》微信小程序map地图,页面跳转(图4)


wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

阿东入门系列《六》微信小程序map地图,页面跳转(图5)

注意点:  1.这里需要强调一下小程序中以堆栈形式记录页面。每一个以wx.navigateTo(OBJECT) 方式跳转的页面都会被压入堆栈,但是以wx.redirectTo(OBJECT)打开的页面则不会。借用一下官方的例子,很清晰明了。

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.redirectTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

**2.**wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

3. 跳转的url是页面的路径(非Tab页面),如需传递参数,要放在路径之后,以 分隔,参数键与参数值用=相连,不同参数用&分隔


从写的位置来说大致可分为两种,一种是在页面wxml文件中以标签的形式,另一种是代码的形式(这种上面已经列举出来了,此处不再赘述)。

组件navigator

页面链接。

阿东入门系列《六》微信小程序map地图,页面跳转(图6)

通过open-type 可以指定跳转的方式是请求转发,请求重定向还是TAB页跳转。(效果同上面js代码的效果,此处不再赘述)


这里记录一个笔者遇到的坑,坑了我一晚上。。。也是很无语。虽然不是页面跳转的问题,但是也有一定联系,姑且记在这里。

本来我的项目首页有两个tab,需要在其中一个列表页中点击一个item进入详情,查看地图。然而,不管我怎么尝试,文档撸了N遍,都还是没解决。

先贴出异常

阿东入门系列《六》微信小程序map地图,页面跳转(图7)

上面报错的aboutUs是首页的其中另一个tab,只是一个展示页,没有操作,所以虽然报错了,然而我并没有管。问题出在我跳转pages/map(详情的地图)的时候,提示我如上最后一行的错误。

Page[pages/map/map] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
  • 1
  • 1

按照笔者以前Android和后台的经验,一直把问题定位到map页的本身。撸了N久都没解决。后来心血来潮把aboutUs的异常解决了,发现问题奇迹般的解决了。

问题出在,aboutUs页,因为只是一个静态页,并没有操作,所以aboutUs.js是空的,问题就出在这。

在小程序中,即时不需要写js的代码,那js文件中也必须要加上Page({})






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。