形状

地图SDK支持为地图添加形状，主要包括三种形状：折线、多边形、圆。

折线

Polyline由若干个LatLng对象连接形成的折线。

创建折线对象，如图1所示。如果您要在添加折线后更改折线的形状，可以调用Polyline对象的setPoints()方法并为折线提供新的点列表。

示例代码如下：

“Java”
// 如果hMap为null，程序停止执行
if (null == hMap) {
    return;
}
// 如果mPolyline不为null，则先从地图上移除，再置为null
Polyline mPolyline;
if (null != mPolyline) {
    mPolyline.remove();
    mPolyline = null;
}
// 在地图上添加一条折线
mPolyline = hMap.addPolyline(new PolylineOptions()
    // 折线坐标
    .add(new LatLng(47.893478, 2.334595), new LatLng(48.993478, 3.434595),
                new LatLng(48.693478, 2.134595), new LatLng(48.793478, 2.334595))
    // 折线颜色
    .color(Color.BLUE)
    // 折线宽度
    .width(3));

“Kotlin”
// 如果hMap为null，程序停止执行
if (null == hMap) {
    return
}
// 如果mPolyline不为null，则先从地图上移除，再置为null
var mPolyline
if (null != mPolyline) {
    mPolyline?.remove()
    mPolyline = null
}
// 在地图上添加一条折线
mPolyline = hMap.addPolyline(PolylineOptions()
        // 折线坐标
        .add(LatLng(47.893478, 2.334595), LatLng(48.993478, 3.434595),
                LatLng(48.693478, 2.134595), LatLng(48.793478, 2.334595))
        // 折线颜色
        .color(Color.BLUE)
        // 折线宽度
        .width(3f))

折线点击事件。可以通过调用Polyline对象的setClickable(boolean)方法来启用和禁用可点击性。要在地图上设置此侦听器，请调用HuaweiMap对象的setOnPolylineClickListener(HuaweiMap.OnPolylineClickListener)方法。

示例代码如下：

“Java”
// 设置折线可点击
mPolyline.setClickable(true);  

hMap.setOnPolylineClickListener(new HuaweiMap.OnPolylineClickListener() {
    @Override
    public void onPolylineClick(Polyline polyline) {
        Toast.makeText(getApplicationContext(), "Polyline is clicked.", Toast.LENGTH_LONG).show();
    }
});

“Kotlin”
// 设置折线可点击
mPolyline?.isClickable = true

hMap.setOnPolylineClickListener { Toast.makeText(applicationContext, "Polyline is clicked.", Toast.LENGTH_LONG).show() }

图1 折线

您可以通过调用Polyline对象的setGradient(boolean on)方法来启用折线的渐变性。
示例代码如下：
```
“Java”
// 设置折线可渐变
mPolyline.setGradient(true);
```
```
“Kotlin”
// 设置折线可渐变
mPolyline.setGradient(true)
```
图2 折线渐变效果图

您可以通过调用Polyline对象的setColorValues(List<Integer> colors)方法来设置折线多段颜色。

示例代码如下：

“Java”
// 设置折线多段颜色
List<Integer> colorValueList = new ArrayList<>();
colorValueList.add(colorValue1);
colorValueList.add(colorValue2);
colorValueList.add(colorValue3);
mPolyline.setColorValues(colorValueList);

“Kotlin”
// 设置折线多段颜色
val colorValueList: MutableList<Int> = ArrayList()
colorValueList.add(colorValue1)
colorValueList.add(colorValue2)
colorValueList.add(colorValue3)
mPolyline.setColorValues(colorValueList)

图3 折线多段颜色效果图
点击放大

多边形

Polygon对象与Polyline对象类似，因为它们都是由一系列有序坐标组成，但是不同的是，多边形是内部填充的封闭形状。

创建多边形对象，如图4所示。要在添加多边形后更改多边形的形状，可以调用Polygon对象的setPoints()方法并为多边形的轮廓提供新的点列表。

示例代码如下：

“Java”
if (null == hMap) {
    return;
}
Polygon mPolygon;
if (null != mPolygon) {
    mPolygon.remove();
    mPolygon = null;
}

mPolygon = hMap
    .addPolygon(new PolygonOptions().addAll(createRectangle(new LatLng(48.893478, 2.334595), 0.1, 0.1))
        .fillColor(Color.GREEN)
        .strokeColor(Color.BLACK));

“Kotlin”
if (null == hMap) {
    return
}
var mPolygon
if (null != mPolygon) {
    mPolygon?.remove()
    mPolygon = null
}

mPolygon = hMap
        .addPolygon(PolygonOptions().addAll(createRectangle(LatLng(48.893478, 2.334595), 0.1, 0.1))
                .fillColor(Color.GREEN)
                .strokeColor(Color.BLACK))

其中createRectangle()方法的实现如下：

示例代码如下：

“Java”
private List<LatLng> createRectangle(LatLng center, double halfWidth, double halfHeight) {
    return Arrays.asList(new LatLng(center.latitude - halfHeight, center.longitude - halfWidth),
        new LatLng(center.latitude - halfHeight, center.longitude + halfWidth),
        new LatLng(center.latitude + halfHeight, center.longitude + halfWidth),
        new LatLng(center.latitude + halfHeight, center.longitude - halfWidth));
}

“Kotlin”
private fun createRectangle(center: LatLng, halfWidth: Double, halfHeight: Double): List<LatLng> {
    return listOf(LatLng(center.latitude - halfHeight, center.longitude - halfWidth),
            LatLng(center.latitude - halfHeight, center.longitude + halfWidth),
            LatLng(center.latitude + halfHeight, center.longitude + halfWidth),
            LatLng(center.latitude + halfHeight, center.longitude - halfWidth))
}

多边形点击事件。默认情况下，多边形不可点击。可以通过调用Polygon对象的setClickable(boolean)方法来启用和禁用可点击性。要在地图上设置此侦听器，需调用HuaweiMap对象的setOnPolygonClickListener(HuaweiMap.OnPolygonClickListener)方法。

示例代码如下：

“Java”
// 设置多边形可点击
mPolygon.setClickable(true);   

hMap.setOnPolygonClickListener(new HuaweiMap.OnPolygonClickListener() {
    @Override
    public void onPolygonClick(Polygon polygon) {
        Toast.makeText(getApplicationContext(), "Polygon is clicked.", Toast.LENGTH_LONG).show();
    }
});

“Kotlin”
// 设置多边形可点击
mPolygon?.isClickable = true

hMap.setOnPolygonClickListener { Toast.makeText(applicationContext, "Polygon is clicked.", Toast.LENGTH_LONG).show() }

图4 多边形

圆

圆包括两种情况，一种是实心圆，一种是空心圆。默认是空心圆，可以用Circle属性进行控制。

创建圆对象，如图5所示。如果您需要在添加圆后更改Circle的属性，可以调用Circle对象的setCenter()、setRadius()等方法进行重新设置。

示例代码如下：

“Java”
if (null == hMap) {
    return;
}
Circle mCircle;
if (null != mCircle) {
    mCircle.remove();
    mCircle = null;
}

mCircle = hMap.addCircle(new CircleOptions()
        .center(new LatLng(48.893478, 2.334595))
        .radius(500)
        .fillColor(Color.GREEN));

“Kotlin”
if (null == hMap) {
    return
}
var mCircle
if (null != mCircle) {
    mCircle?.remove()
    mCircle = null
}
mCircle = hMap.addCircle(CircleOptions()
        .center(LatLng(48.893478, 2.334595))
        .radius(500.0)
        .fillColor(Color.GREEN))

圆点击事件。默认情况下Circle不可点击。您可以通过使用CircleOptions.clickable(boolean)然后调用HuaweiMap对象的addCircle(CircleOptions)方法，或通过调用Circle.setClickable(boolean)来启用和禁用圆的可点击性。

可以使用HuaweiMap.OnCircleClickListener侦听可点击圆上的点击事件。要在地图上设置此侦听器，请调用HuaweiMap对象的setOnCircleClickListener(HuaweiMap.OnCircleClickListener)方法。

用户点击圆时，您将收到onCircleClick(Circle)方法的回调。

示例代码如下：

“Java”
if (null != mCircle) {
    // 设置圆可点击
    mCircle.setClickable(true);  

    hMap.setOnCircleClickListener(new HuaweiMap.OnCircleClickListener() {
        @Override
        public void onCircleClick(Circle circle) {
            if (circle.equals(mCircle)) {
                Toast.makeText(getApplicationContext(), "Circle is clicked.", Toast.LENGTH_LONG).show();
            }
        }
    });
}

“Kotlin”
if (null != mCircle) {
    // 设置圆可点击
    mCircle?.isClickable = true

    hMap.setOnCircleClickListener { circle ->
        if (circle == mCircle) {
            Toast.makeText(applicationContext, "Circle is clicked.", Toast.LENGTH_LONG).show()
        }
    }
}

设置空心圆。

示例代码如下：

“Java”
// 设置圆的填充色为透明色
mCircle.setFillColor(Color.TRANSPARENT);  
// 设置圆的边缘颜色
mCircle.setStrokeColor(Color.RED);
// 设置圆的边缘宽度
mCircle.setStrokeWidth(10.0f);

“Kotlin”
// 设置圆的填充色为透明色
mCircle?.fillColor = Color.TRANSPARENT  
// 设置圆的边缘颜色
mCircle?.setStrokeColor(Color.RED)
// 设置圆的边缘宽度 
mCircle?.setStrokeWidth(10.0f)

图5 圆

修改外观

[h2]线条颜色

地图SDK中支持设置Polyline、Polygon、Circle的颜色。

多边形

示例代码如下：

“Java”
// 在地图上添加一个多边形mPolygon
Polygon mPolygon = hMap.addPolygon(new PolygonOptions().add(new LatLng(48.793478, 2.234595), new LatLng(48.793478, 2.434595), new LatLng(48.993478, 2.434595), new LatLng(48.993478, 2.234595)));
// 设置多边形mPolygon的边框颜色为红色
mPolygon.setStrokeColor(Color.RED);

“Kotlin”
// 在地图上添加一个多边形mPolygon
val mPolygon: Polygon = hMap.addPolygon(PolygonOptions()
        .add(LatLng(48.793478, 2.234595), LatLng(48.793478, 2.434595)
                , LatLng(48.993478, 2.434595), LatLng(48.993478, 2.234595)))
// 设置多边形mPolygon的边框颜色为红色
mPolygon.strokeColor = Color.RED

点击放大

圆

示例代码如下：

“Java”
// 在地图上添加一个圆mCircle
Circle mCircle = hMap.addCircle(new CircleOptions()
    // 设置圆心坐标
    .center(new LatLng(48.893478, 2.334595))
    // 设置圆的半径
    .radius(500));
// 设置圆mCircle的边框颜色为红色
mCircle.setStrokeColor(Color.RED);

“Kotlin”
// 在地图上添加一个圆mCircle
val mCircle = hMap.addCircle(CircleOptions()
    // 设置圆心坐标
    .center(LatLng(48.893478, 2.334595))
    // 设置圆的半径
    .radius(500.0))
// 设置圆mCircle的边框颜色为红色
mCircle.strokeColor = Color.RED

点击放大

折线

示例代码如下：

“Java”
// 在地图上添加一个折线mPolyline
Polyline mPolyline = hMap.addPolyline(new PolylineOptions().add(new LatLng(47.893478, 2.334595),
        new LatLng(48.993478, 3.434595), new LatLng(48.693478, 2.134595), new LatLng(48.793478, 2.334595)));
// 设置折线mPolyline的颜色为红色
mPolyline.setColor(Color.RED);
// 设置折线mPolyline的宽度为10像素
mPolyline.setWidth(10);

“Kotlin”
// 在地图上添加一个折线mPolyline
val mPolyline = hMap.addPolyline(PolylineOptions().add(LatLng(47.893478, 2.334595),
        LatLng(48.993478, 3.434595), LatLng(48.693478, 2.134595), LatLng(48.793478, 2.334595)))
// 设置折线mPolyline的颜色为红色
mPolyline.color = Color.RED
// 设置折线mPolyline的宽度为10像素
mPolyline.width = 10f

点击放大

[h2]填充颜色

可设置Polygon和Circle的填充颜色。

多边形

示例代码如下：

“Java”
Polygon mPolygon = hMap.addPolygon(new PolygonOptions().add(new LatLng(48.793478, 2.234595), new LatLng(48.793478, 2.434595), new LatLng(48.993478, 2.434595), new LatLng(48.993478, 2.234595)));
mPolygon.setFillColor(Color.GREEN);

“Kotlin”
val mPolygon: Polygon = hMap.addPolygon(PolygonOptions().add(LatLng(48.793478, 2.234595),
        LatLng(48.793478, 2.434595), LatLng(48.993478, 2.434595), LatLng(48.993478, 2.234595)))
mPolygon.fillColor = Color.GREEN

点击放大

圆形

示例代码如下：

“Java”
Circle mCircle = hMap.addCircle(new CircleOptions().center(new LatLng(48.893478, 2.334595)).radius(500));
mCircle.setFillColor(Color.GREEN);

“Kotlin”
val mCircle = hMap.addCircle(CircleOptions().center(LatLng(48.893478, 2.334595)).radius(500.0))
mCircle.fillColor = Color.GREEN

点击放大

[h2]线条样式

地图SDK支持设置边框样式：Dash、Dot、Gap，下面代码以设置折线样式为例。

示例代码如下：

“Java”
List<PatternItem> linePattern = new ArrayList<>();
PatternItem dash = new Dash(100);
linePattern.add(dash);
PatternItem dot = new Dot();
linePattern.add(dot);
PatternItem gap = new Gap(40);
linePattern.add(gap);

mPolyline = hMap.addPolyline(new PolylineOptions().add(new LatLng(47.893478, 2.334595), new LatLng(48.993478, 3.434595), new LatLng(48.693478, 2.134595), new LatLng(48.793478, 2.334595)));
mPolyline.setPattern(linePattern);

“Kotlin”
val linePattern: MutableList<PatternItem> = ArrayList()
val dash: PatternItem = Dash(100f)
linePattern.add(dash)
val dot: PatternItem = Dot()
linePattern.add(dot)
val gap: PatternItem = Gap(40f)
linePattern.add(gap)
 
mPolyline = hMap.addPolyline(PolylineOptions().add(LatLng(47.893478, 2.334595), LatLng(48.993478, 3.434595),
        LatLng(48.693478, 2.134595), LatLng(48.793478, 2.334595)))
mPolyline?.pattern = linePattern

点击放大

[h2]顶点类型

地图SDK支持设置折线的顶点类型：ButtCap、CustomCap、RoundCap、SquareCap。

示例代码如下：

“Java”
mPolyline = hMap.addPolyline(new PolylineOptions().add(new LatLng(47.893478, 2.334595), new LatLng(48.993478, 3.434595), new LatLng(48.693478, 2.134595), new LatLng(48.793478, 2.334595)));

// 设置折线的起始顶点为方形
mPolyline.setStartCap(new ButtCap());
// 设置折线的末端顶点为半圆形
mPolyline.setEndCap(new RoundCap());

“Kotlin”
mPolyline = hMap.addPolyline(PolylineOptions().add(LatLng(47.893478, 2.334595), LatLng(48.993478, 3.434595),
        LatLng(48.693478, 2.134595), LatLng(48.793478, 2.334595)))
        
// 设置折线的起始顶点为方形
mPolyline?.startCap = ButtCap()
// 设置折线的末端顶点为半圆形
mPolyline?.endCap = RoundCap()

点击放大

目录

形状

折线

多边形

圆

修改外观

[h2]线条颜色

[h2]填充颜色

[h2]线条样式

[h2]顶点类型