微信小程序开发实战（18）：地图组件
source link: https://blog.csdn.net/nokiaguy/article/details/107829417
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在小程序中可以使用<map>标签嵌入地图，那么可能很多同学会问，<map>嵌入的是哪家的地图呢？这还用问，自然是腾讯的地图了，而且不能换成其他的地图（百度、高德等）。
我们先来了解一下<map>标签的常用属性。
longitude：经度
latitude：纬度
scale：缩放级别，默认值时16，取值范围是5到18
controls：在地图上放置的控件数组
markers：在地图上放置的标记点数组
show-location：显示带有方向的当前定位点
bindcontroltap：点击控件时触发的事件
bindmarkertap：点击标记点时触发的事件
bindregionchange：视野发生变化时触发的事件
下面的布局文件中放置了一个<map>标签，并设置了上述的属性。
显示的效果如图1所示。
图1显示腾讯地图
在地图上，显示了一个标记（笑脸图像）和一个控件图像（蓝精灵图像）。可能很多同学会问，标记和控件到底有什么区别呢？不都可以放置图像吗？实际上，标记和控件是基本相同的，主要区别只有一点，标记会随着地图移动，而控件不会随着地图移动。
在<map>标签中，大多数属性都使用了变量，这些变量和相应方法的代码如下：
我们看到，在这段代码中，有三个数组：markers、polyline和controls。这三个数组都通过对象定义了多个属性。其中markers和controls数组中属性类似，前者每个数组元素表示一个标记，后者一个数组元素表示一个控件。ployline中每个数组元素表示一条折线（通过经纬度确定折线中的每个点）。这些折线（本例只是一条直线），从笑脸标记头顶中心部位向上延伸。
点击控件和标记都可以点击，点击后，Console中输出的日志信息如图2所示。在日志信息中分别输出了在markers和controls数组中定义的id属性值。
图2 点击标记和控件输出的日志信息
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK