形状

折线

Polyline是由多个经纬度点连接而成的折线。

添加折线

调用HWMapJsSDK.HWPolyline(polylineOptions)创建一条折线到地图上。

var map;
var polyline;
function initMap() { 
    var mapOptions = {}; 
    mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
    mapOptions.zoom = 8; 
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions); 
    polyline = new HWMapJsSDK.HWPolyline({ 
        map: map, 
        path: [ 
            {lat: 49, lng: 2}, 
            {lat: 48.5, lng: 2.5}, 
            {lat: 48, lng: 1.5} 
        ], 
        strokeColor: '#112233', 
        strokeWeight: 5, 
    }); 
}

删除折线

从地图中移除折线，请调用setMap()方法并将null作为传递参数。

polyline.setMap(null);

请注意，上述方法不会删除折线，它只是把折线从地图上移除。如果用户希望删除折线，则应将其从地图上移除，然后将折线本身置为null即可。

polyline.setMap(null); 
polyline = null;

修改折线

通过HWPolyline提供的方法对属性进行修改，例如调用setStrokeWeight(strokeWeight)方法修改折线宽度，更多方法参见HWPolyline：

<tr> 
    <td>Polyline StrokeWeight:</td> 
    <td><input id="strokeWeightInput" type="text" value="2"/></td> 
</tr>
<script>
    var strokeWeight = Number(document.getElementById("strokeWeightInput").value); 
    polyline.setStrokeWeight(strokeWeight);
</script>

折线的以下属性支持自定义：

折线事件

HWPolyline支持多种事件回调，如下表所示，具体请参见HWPolyline事件。

以鼠标单击事件为例，要在地图上设置此监听器，请调用HWPolyline对象的addListener('click', callback)方法：

function handleClick() {
    alert("On Polyline click.");
}
polyline.addListener('click', handleClick);

多边形

Polygon是由多个经纬度点连接而成的多边形，与Polyline不同的是，它是内部填充的封闭形状。

添加多边形

调用HWMapJsSDK.HWPolygon(polygonoptions)创建一个多边形到地图上。

var map;
var polygon;
function initMap() { 
    var mapOptions = {}; 
    mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
    mapOptions.zoom = 8; 
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions); 
    polygon = new HWMapJsSDK.HWPolygon({ 
        map : map, 
        paths: [ 
            [ 
                {lat: 49, lng: 2}, 
                {lat: 48.5, lng: 2.5}, 
                {lat: 48, lng: 1.5} 
            ], 
        ], 
        fillColor: '#00ff41', 
        strokeColor: '#ff0000', 
        strokeWeight: 5, 
    }); 
}

删除多边形

从地图中移除多边形，请调用setMap()方法并将null作为传递参数。

polygon.setMap(null);

请注意，上述方法不会删除多边形，它只是把多边形从地图上移除。如果用户希望删除多边形，则应将其从地图上移除，然后将多边形本身置为null即可。

polygon.setMap(null); 
polygon = null;

修改多边形

通过HWPolygon提供的方法对属性进行修改，例如调用setFillColor(fillColor)方法修改多边形填充颜色：

<tr> 
    <td>Polygon FillColor:</td> 
    <td><input id="fillColorInput" type="text" value="#999999"/></td> 
</tr>
<script>
    var fillColor = document.getElementById("fillColorInput").value; 
    polygon.setFillColor(fillColor);
</script>

多边形的以下属性支持自定义：

多边形事件

HWPolygon支持多种事件回调，如下表所示，具体请参见HWPolygon事件。

以鼠标单击事件为例，要在地图上设置此监听器，请调用HWPolygon对象的addListener('click', callback)方法：

function handleClick() {
    alert("On Polygon click.");
}
polygon.addListener('click', handleClick);

圆

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

添加圆

调用HWMapJsSDK.HWCircle(circleOptions)创建一个圆到地图上。

var map;
var circle;
function initMap() { 
    var mapOptions = {}; 
    mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
    mapOptions.zoom = 8; 
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions); 
    circle = new HWMapJsSDK.HWCircle({ 
        map: map, 
        center: {lat: 48.5, lng: 2.3}, 
        radius: 20000, 
        fillColor: 'yellow', 
        strokeColor:'red', 
        strokeWeight: 10, 
    }); 
}

删除圆

从地图中移除圆，请调用setMap()方法并将null作为传递参数。

circle.setMap(null);

请注意，上述方法不会删除圆，它只是把圆从地图上移除。如果用户希望删除圆，则应将其从地图上移除，然后将圆本身置为null即可。

circle.setMap(null); 
circle = null;

修改圆

通过HWCircle提供的方法对属性进行修改，例如调用setCenter(center)方法修改圆心位置：

<tr> 
    <td>Center Lat:</td> 
    <td><input id="centerLatInput" type="text" value="48.6"/></td> 
</tr> 
<tr> 
    <td>Center Lng:</td> 
    <td><input id="centerLngInput" type="text" value="2.4"/></td> 
</tr>
<script>
    var lat = Number(document.getElementById("centerLatInput").value); 
    var lng = Number(document.getElementById("centerLngInput").value); 
    circle.setCenter({lat: lat, lng: lng});
</script>

圆的以下属性支持自定义：

圆事件

HWCircle支持多种事件回调，如下表所示，具体请参见HWCircle事件。

以鼠标单击事件为例，要在地图上设置此监听器，请调用HWCircle对象的addListener('click', callback)方法：

function handleClick() {
    alert("On Circle click.");
}
circle.addListener('click', handleClick);

贝塞尔曲线

BezierCurve是依据四个或三个位置任意的点坐标绘制出的一条光滑曲线。

添加贝塞尔曲线

调用HWMapJsSDK.HWBezierCurve(BezierCurveOptions)创建一条贝塞尔曲线到地图上。

var map;
var bezierCurve;
function initMap() { 
    var mapOptions = {}; 
    mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
    mapOptions.zoom = 8; 
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
    const paths = [
    [
        { lng: 5.399, lat: 48.910} // 起点
    ],
    [
        { lng: 4.399, lat: 49.910}, // 控制点1
        { lng: 3.399, lat: 47.910}, // 控制点2
        { lng: 2.399, lat: 48.910} // 途经点1
    ],
    [
        { lng: 1.399, lat: 47.910}, // 控制点1
        { lng: -0.601, lat: 48.910} // 途经点2
    ],
];
bezierCurve = new HWMapJsSDK.HWBezierCurve({
        map: map,
        paths,
        strokeColor: 'blue',
        strokeWeight: 5,
        strokeLineDash: [20, 10]
    })
}

删除贝塞尔曲线

从地图中移除贝塞尔曲线，请调用setMap()方法并将null作为传递参数。

bezierCurve.setMap(null);

请注意，上述方法不会删除贝塞尔曲线，它只是把贝塞尔曲线从地图上移除。如果用户希望删除贝塞尔曲线，则应将其从地图上移除，然后将贝塞尔曲线本身置为null即可。

bezierCurve.setMap(null); 
bezierCurve = null;

修改贝塞尔曲线

通过HWBezierCurve提供的方法对属性进行修改，例如调用setStrokeWeight(strokeWeight)方法修改贝塞尔曲线宽度，更多方法参见HWBezierCurve：

<tr> 
    <td>BezierCurve StrokeWeight:</td> 
    <td><input id="strokeWeightInput" type="text" value="2"/></td> 
</tr>
<script>
    var strokeWeight = Number(document.getElementById("strokeWeightInput").value); 
    bezierCurve.setStrokeWeight(strokeWeight);
</script>

贝塞尔曲线的以下属性支持自定义：

贝塞尔曲线事件

HWBezierCurve支持多种事件回调，如下表所示，具体请参见HWBezierCurve事件。

以鼠标单击事件为例，要在地图上设置此监听器，请调用HWBezierCurve对象的addListener('click', callback)方法：

function handleClick() {
    alert("On BezierCurve click.");
}
bezierCurve.addListener('click', handleClick);