前言
在本系列文章中,已经对地图显示,地图视野控制,地图控件,标注点进行了学习。在本篇博文中,主要对覆盖物和触发事件进行讨论。
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 = {