如何在小程序中使用地图

这篇文章中，我们将介绍小程序地图组件的使用，官方文档已经比较详细的介绍了map组件的使用，但是对于刚开始接触地图组件的同学，难免有些难以下手。本文将以Hello World为例对地图组件的使用列出一些demo，以方便后续开发。

Hello World

小程序提供的map组件是原生组件，部分功能需要配合地图相关的API使用，这里先不做涉及，我们后续再讲。先看看如何展示一张地图吧，打开你的微信编辑器，找到index.wxml文件，写下下面的代码。

<map></map>

没错，通过这段代码，默认就能调用出一个地图组件，但是仅仅能显示地图而已，并无其他功能，如果我想要一些自定的功能怎么办？我们可以调用map组件提供的一些属性，具体属性如下表。

我们可以先从简单的功能开始，目前的地图组件默认位置的是北京的经纬度。我们可以将其改成自己所在位置的经纬度，并设置大小。

<map style='width:500px;height:500px' longitude="113.941133" latitude="22.545999"></map>

当然，我们可以设置地图是否支持3D，是否能开启指南针，是否支持插件等功能。可以试试下面的代码，建议在真机端测试，因为开发工具的地图是模拟出来的，部分功能无法实现，在真机端可以看到下面的图片样式。

<map style='width:500px;height:500px' longitude="113.941133" latitude="22.545999" scale="18" show-compass="ture" enable-3D="ture" enable-overlooking="ture" enable-rotate="ture" enable-zoom="ture" enable-scroll="ture"></map>

现在，我们已经是实现了一个简单的demo，如果我们想加入更多功能，比如标记当前你指定的坐标，并作一些信息展示，那么该怎么做呢？

Hello World – 地点标记

为了解决标记显示问题，小程序增加了markers属性，我们可以为当前坐标增加相关信息。还是用上图的代码，我们增加一行属性配置代码。

<map style='width:500px;height:500px' longitude="113.941133" latitude="22.545999" scale="18" show-compass="ture" enable-3D="ture" enable-overlooking="ture" enable-rotate="ture" enable-zoom="ture" enable-scroll="ture" markers="{{markers}}"></map>

然后，我们打开index.js修改为下面的代码。

Page({
  data:{
    markers: [{
      iconPath: "./others.png",
      id: 0,
      latitude: 22.545999,
      longitude: 113.941133,
      width: 30,
      height: 30
    }]
  }
})

这里可能会提醒大家找不到others.png这个文件，我们需要下载将其复制到index文件夹下。

之后再次进行预览，你就能看大当前的标志了。

那么，index.js文件中的代码到底是什么意思呢？我们先看看官方文档。

markers – 标记点用于在地图上显示标记的位置

在index.js文件中，我们指定了iconPath图标，指定了latitude、latitude经纬度，以及图标的大小，包括标记点的ID 。然后在地图中显示出来。

我们也可以为当前标记增加标签和气泡，参考上表中的callout和label，就可以增加相关标记。先上代码，首先修改index.js文件。

Page({
  data:{
    markers: [{
      iconPath: "./others.png",
      id: 0,
      latitude: 22.545999,
      longitude: 113.941133,
      width: 30,
      height: 30,
      label: {
        content: "我在这里",
        color: "#fff",
        fontSize: 20,
        bgColor: "#000"
      }
    }],
  }
})

我们可以看看 marker 上的气泡 label和callout支持的属性。

可以看到，代码中，我们指定了显示的文本，指定了文本及背景的颜色，指定了文本的大小。当然，这里只是演示了部分功能，小伙伴可以自定更多功能。

Hello world – 路径及区域的标记

有时我们需要在地图中实现坐标点连线功能，如果自己一个一个标记路径非常麻烦，那么我们可以使用小程序给出的polyline属性，来将地图中的坐标点连成一条线。指定一系列坐标点，从数组第一项连线至最后一项，我们先看看官方文档。

polyline中需要points属性数组来展示当前路径，所以我们在index.js中需要定义points数组数据。我们还是使用上面的代码进行修改。

<map style='width:500px;height:500px' longitude="113.941133" latitude="22.545999" scale="16" show-compass="ture" enable-3D="ture" enable-overlooking="ture" enable-rotate="ture" enable-zoom="ture" enable-scroll="ture" polyline="{{polyline}}"></map>

然后打开index.js修改代码。

Page({
  data:{
    polyline: [{
      points: [{
        longitude: 113.941133,
        latitude: 22.545999
      }, {
        longitude: 113.941868,
        latitude: 22.528408
      },
      {
        longitude: 113.951183,
        latitude: 22.55359
      }],
      color: "#FF0000DD",
      width: 10,
      dottedLine: true
    }],
  }
})

在小程序中，我们将这三个坐标通过polyline属性将其连接起来。某些情况下，我们可能还会在地图中显示一和闭合图形，小程序官方也提供了polygons组件供我们使用。和polyline使用比较接近，我们可以试试下面的代码。

首先修改index.wxml文件为下面的代码。

<map style='width:500px;height:500px' longitude="113.941133" latitude="22.545999" scale="16" show-compass="ture" enable-3D="ture" enable-overlooking="ture" enable-rotate="ture" enable-zoom="ture" enable-scroll="ture" polygons="{{polygons}}"></map>

然后修改index.js文件为下面的代码。

Page({
  data:{
    polygons: [{
      points: [{
        longitude: 113.941133,
        latitude: 22.545999
      }, {
        longitude: 113.941868,
        latitude: 22.528408
      },
      {
        longitude: 113.951183,
        latitude: 22.55359
      }],
      fillColor: "#FF0000AA",
      strokeColor: "#000000DD",
      strokeWidth:5
    }],
  }
})

这时，你会看到如下所示的地图样式。

我们在地图中，画出了一个包含我们在index.js中定义的points数组的图形。

Hello World – 在地图中显示圆

除了多边形显示，有事还需要以圆的形式展现，这里我们可以使用map组件的circles属性来实现。依然修改上面代码。

<map style='width:500px;height:500px' longitude="113.941133" latitude="22.545999" scale="18" show-compass="ture" enable-3D="ture" enable-overlooking="ture" enable-rotate="ture" enable-zoom="ture" enable-scroll="ture" circles="{{circles}}"></map>

然后，我们在index.js中，改成下面的代码。

Page({
  data:{
    circles: [{
      longitude: 113.941133,
      latitude: 22.545999,
      fillColor: "#FF0000AA",
      color: "#000000DD",
      radius:200
    }],
  }
})

我们来看看官方的文档

圆的属性不多，在代码中，我们指定了该圆圆心的经纬度，指定了半径和描边填充颜色。大家可以按照自己需求修改。

Hello world – 实现小程序内的定位

小程序也提供了相关的定位功能，我们可以通过wx.getLocation()函数来获取当前用户的经纬度，然后通过markers属性来将其显示出来。首先，我们看看wx.getLocation()函数的功能，我们需要传入表中的若干参数，然后查看返回值即可。

这里我们只需要传入type的值和等待返回success结果就行，我们看看返回值会返回什么。

我们需要定位，则只需要返回latitude值和longitude值即可，为了方便演示，我这边也返回speed速度，altitude高度。首先，我们修改index.wxml文件，创建地图。

<map style='width:500px;height:500px' longitude="{{longitude}}" latitude="{{latitude}}" scale="18" show-compass="ture" enable-3D="ture" enable-overlooking="ture" enable-rotate="ture" enable-zoom="ture" enable-scroll="ture" markers="{{markers}}"></map>
<text>当前速度：{{speed}}m/s</text>
<text>当前高度：{{altitude}}m</text>
<button bindtap="wx_getLocation">获取</button>
<text>点击上面的按钮获取当前位置、高度、速度</text>

然后修改index.js文件

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: [{
      iconPath: "others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 20,
      height: 20
    }],
  },
  wx_getLocation() {
    var myThis = this;
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        myThis.setData({
          longitude: res.longitude,
          latitude: res.latitude,
          speed: res.speed,
          altitude: res.altitude,
          markers: [{
            iconPath: "others.png",
            id: 0,
            latitude: res.latitude,
            longitude: res.longitude,
            width: 20,
            height: 20
          }],
        })
      }
    })
  }
})

这里我们先在data{}中指定了默认的数值，以防止开启后地图无法显示内容，然后在wx_getlocation()函数中调用wx.getlocation的API来显示位置，同时返回值使用this.setData改变默认数值，显示在index.js中。

总结

你学会地图组件的使用了吗？尝试写一个小的demo出来吧！后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！