小程序：导航navigation与地图map组件总结

逃离我推掉我的手 2022-01-22 02:03 425阅读 0赞

**导航与地图组件的应用场景：**

在小程序需要由当前页面跳转到指定的页面时，就可以使用导航navigation组件，只需要设置指定页面的url地址即可。当需要实现定位、查找位置等一些LBS信息时，像滴滴打车这样的应用，就可以用地图map组件。

## 1.导航navigation ##

navigation：页面的链接。

它有很多的属性，最最常用的就是url，表示当前小程序内的跳转链接。navigation组件用法也很简单。

新建的quickstart项目，点击index首页的头像，会跳转到查看日志页面，这是通过给头像图片绑定bindtap事件实现的，把bindtap事件去掉，点击头像就不会跳转的。

我们使用导航navigation组件也可以实现页面的跳转。在index.wxml文件中使用navigation包裹住点击区域的代码即可。如下：

![navigation测试][navigation]

点击头像会跳转到查看日志页面，然后点击左上角返回键可返回首页。效果如下：

![navigation跳转效果][navigation 1]

还可以指定页面的跳转方式，比如跳过去不让返回，可以设置navigation的open-type属性，使open-type=“redirect”，redirect是关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

另外navigation导航组件有很多的属性，常用的有：

![navigation常用属性][navigation 2]  
其他更多属性请参考开发文档。[导航组件][Link 1]

## 2.地图map组件 ##

map：地图。

map.wxml文件中代码：

![map使用][map]

map.js中代码：

Page({ 
      data: { 
        //markers： 标记点用于在地图上显示标记的位置
        markers: [{ 
          iconPath: "../img/ta.jpg",
          id: 0,
          latitude: 31.23,
          longitude: 121.45,
          width: 30,
          height: 30,
          title:'上海站'
        }],
        // polyline：指定一系列坐标点，从数组第一项连线至最后一项
        polyline: [{ 
          points: [{ 
            longitude: 113.3245211,
            latitude: 23.10229
          }, { 
            longitude: 113.324520,
            latitude: 23.21229
          }],
          color: "#FF0000DD",
          width: 2,
          dottedLine: true
        }],
      },
      regionchange(e) { 
        console.log(e.type)
      },
      markertap(e) { 
        console.log(e.markerId)
      },
      controltap(e) { 
        console.log(e.controlId)
      }
    })

效果：

![map效果][map 1]

map组件的常用属性：

![map常用属性][map 2]  
![map常用属性2][map_2]

更多属性和用法参考开发文档[地图组件][Link 2]

[navigation]: /images/20220122/f6fbf7c4bb5344df8d779b136be7001e.png
[navigation 1]: /images/20220122/5b301dca1396444cadb33fdb051f66ae.png
[navigation 2]: /images/20220122/36288351cd834cfa9ed0a7669a7e2e1b.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
[map]: /images/20220122/d608d4e41ecd41a7b13d2437c5ff6f33.png
[map 1]: /images/20220122/da0ccfdb98d14f3098c9c5720adac9f8.png
[map 2]: /images/20220122/e9c9a2580bd64407b911b52e0f8ddba8.png
[map_2]: /images/20220122/1dca9298101941169c9d2a3536faa0f9.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html