用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发实战(18):地图组件

Rolan 2020-8-7 17:25

在小程序中可以使用 标签嵌入地图,那么可能很多同学会问, 嵌入的是哪家的地图呢?

小程序中可以使用 标签嵌入地图,那么可能很多同学会问, 嵌入的是哪家的地图呢?这还用问,自然是腾讯的地图了,而且不能换成其他的地图(百度、高德等)。

我们先来了解一下 标签的常用属性。

  • longitude:经度

  • latitude:纬度

  • scale:缩放级别,默认值时16,取值范围是5到18

  • controls:在地图上放置的控件数组

  • markers:在地图上放置的标记点数组

  • show-location:显示带有方向的当前定位点

  • bindcontroltap:点击控件时触发的事件

  • bindmarkertap:点击标记点时触发的事件

  • bindregionchange:视野发生变化时触发的事件

下面的布局文件中放置了一个 标签,并设置了上述的属性。

<map longitude="113.324520" latitude="23.099994"
scale="14" controls="{{controls}}"
bindcontroltap="controltap" markers="{{markers}}"
bindmarkertap="markertap" polyline="{{polyline}}"
bindregionchange="regionchange" show-location
style="width: 100%; height: 100%;"/>

显示的效果如图 1 所示。

图1显示腾讯地图

在地图上,显示了一个标记(笑脸图像)和一个控件图像(蓝精灵图像)。可能很多同学会问,标记和控件到底有什么区别呢?不都可以放置图像吗?实际上,标记和控件是基本相同的,主要区别只有一点,标记会随着地图移动,而控件不会随着地图移动。

标签中,大多数属性都使用了变量,这些变量和相应方法的代码如下:

Page({
  data: {
    markers: [{
      iconPath: "/image/face.png",   //  标记图像
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{                     //  在地图上通过经纬度绘制折线
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF00FF",
      width: 5,
      dottedLine: false
    }],
    controls: [{
      id: 1,
      iconPath: '/image/sprite.png',   //  控件图像
      position: {
        left: 0,
        top: 260 - 80,
        width: 80,
        height: 80
      },
      clickable: true                 //  设为控件可单击的状态
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

我们看到,在这段代码中,有三个数组: markers polyline controls 。这三个数组都通过对象定义了多个属性。其中 markers controls 数组中属性类似,前者每个数组元素表示一个标记,后者一个数组元素表示一个控件。 ployline 中每个数组元素表示一条折线(通过经纬度确定折线中的每个点)。这些折线(本例只是一条直线),从笑脸标记头顶中心部位向上延伸。

点击控件和标记都可以点击,点击后, Console 中输出的日志信息如图 2 所示。在日志信息中分别输出了在 markers controls 数组中定义的 id 属性值。

图2  点击标记和控件输出的日志信息

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 李宁的极客世界 来自: csdn