微信小程序开发实战（18）：地图组件

布满荆棘的人生 2023-03-06 08:08 33阅读 0赞

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

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

*  longitude：经度
 *  latitude：纬度
 *  scale：缩放级别，默认值时16，取值范围是5到18
 *  controls：在地图上放置的控件数组
 *  markers：在地图上放置的标记点数组
 *  show-location：显示带有方向的当前定位点
 *  bindcontroltap：点击控件时触发的事件
 *  bindmarkertap：点击标记点时触发的事件
 *  bindregionchange：视野发生变化时触发的事件

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

显示的效果如图1所示。

![format_png][]

图1显示腾讯地图

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

在<map>标签中，大多数属性都使用了变量，这些变量和相应方法的代码如下：

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属性值。

![format_png 1][]

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

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 2][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 3][]

[format_png]: /images/20230208/ea5420986f154d71a042c02f7b06f6bc.png
[format_png 1]: /images/20230208/b48ca5c1476940909803251a2aa44f58.png
[format_png 2]: /images/20230208/6d27bf5fff164c5eafc369e128501936.png
[format_png 3]: /images/20230208/be08e8f7823347cda81c8e0a24084392.png