腾讯位置服务示例小程序（二）

前言

本篇博文主要对Map组件下的二级菜单进行学习。

Map组件

地图显示

在地图显示页面中，主要由tab导航，地图显示窗口和切换按钮组成。虽然该页面内容较为丰富，但我们只对较为实用对几个功能进行学习。

tab导航组件的初始化

tab导航组件的初始化在这个小程序中非常的简单，只需要在wxml中进行如下声明

<tab tabList="{
    {tabList}}" bind:clickTab="clickTab"/>

其中，tab为一个组件，在json文件中引入；tabList为需要在js文件中进行定义的数据列表；clickTab为需要在js文件中进行定义的响应函数。至于tab这个组件的详细学习，我们会在稍后进行学习。根据tab组件的要求，tabList中的每一段数据需要包含name属性，故js中的表示如下

tabList: [{
   
			id: 0,
			show: true,
			name: '基础地图'
		},{
   
			id: 1,
			show: false,
			name: '室内图'
		},{
   
			id: 2,
			show: false,
			name: '海外地图'
		},{
   
			id: 3,
			show: false,
			name: '卫星图'
		}],

其中，id可以用来进行唯一标示，show可以用来表示该子tab对应的页面是否应当被显示。当点击tab中的子标签时，会触发tab导航的响应函数，即

	// 点击标题栏处的tab的响应函数
	clickTab (event) {
   
		// 与之前类似，即使用id来判断当前哪个tab被点击
		const id = event.detail.current,list = this.data.tabList;
		for (let i = 0, len = list.length; i < len; ++i) {
   
			if (list[i].id === id) {
   
				list[i].show = !list[i].show;
			} else {
   
				list[i].show = false;
			}
		}
		// 更新数据
		this.setData({
   
			tabList: list
		});
	},

自此，tab导航组件初始化完毕。

使用tab导航来控制哪一个页面需要被显示

由于tab导航使用show字段来表示当前哪个tab子控件处于激活状态，故在wxml中，使用如下代码来对页面进行显示和不显示的操作

<view class="map-content pl20 {
    {tabList[0].show ? 'map-content-show' : '' }}">
<view class="map-content pl20 {
    {tabList[1].show ? 'map-content-show' : '' }}">
<view class="map-content pl20 {
    {tabList[2].show ? 'map-content-show' : '' }}">
<view class="map-content pl20 {
    {tabList[3].show ? 'map-content-show' : '' }}">

由上述代码可以看出，当tabList[n].show的值为true时，即表示当前第n个子控件处于激活状态，故将该页面进行展示。

地图控件的显示

微信小程序API提供了一个直接用来显示地图的组件，能够使开发者轻而易举的将地图展现到页面中。在这里，主要列举了两个较为典型的地图组件使用方式

<!-- 这里的latitube和logitude为经纬度
        即打开地图是的视野位置 -->
<!-- enable-3D是否显示3D楼块，参数为bool -->
<!-- enable-traffic是否开启实时路况，参数为bool -->
<map class="map" latitude="40.040415" longitude="116.273511" scale="17" enable-3D