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

前言

在本系列文章中，已经对地图显示，地图视野控制，地图控件，标注点进行了学习。在本篇博文中，主要对覆盖物和触发事件进行讨论。

Map组件

地图显示

地图视野控制

地图控件

标注点

覆盖物

覆盖物，顾名思义就是在地图上人为添加某些能够遮盖住地图对物体。在这个示例小程序中，主要所讨论的覆盖物为线条，多边形和圆形。与之前的某些页面类似，该页面需要导入两个自定义的组件，即tab导航组件和actionsheet底部弹出选项框组件。

线条

由于在地图上绘制线条，故依旧是在map组件上添加上新的参数

<map class="map" polyline="{
    
    {polyline}}" latitude="40.040415" longitude="116.273511" scale="15"></map>

其他参数都很常见，主要是多了polyline参数，这也就是花线条的主要参数。我们可以在js脚本中查看polyline的具体代码。

const INIT_POLYLINE = {
   
   
	// 线条的起点和终点
	points: [
		{
   
   latitude: 40.038540, longitude: 116.272389},
		{
   
   latitude: 40.041407, longitude: 116.274738}
	],
	// 线条的颜色,宽度
	color: '#3875FF',
	width: 8,
	// 是否是虚线
	dottedLine: false,
	// 线条边的宽度
	borderWidth: 2
};

从上述代码可以看出，一条绘制的线条不仅可以设置起点和终点，还可以对线条的颜色，线条的宽度，是否为虚线和线条边的宽度进行修改。基本的修改方式在前边的博文有细说，故不在此进行展开。

多边形

绘制多边形与绘制线条类似

<map class="map" polygons="{
    
    {polygons}}" latitude="40.040415" longitude="116.273511" scale="15"></map>

同样，对polygons的参数进行详细观看

const INIT_POLYGON = {
   
   
	// 左上角，左下角，右下角，右上角
	points