标记

添加标记

var map;
var mMarker;

// 启动脚本的回调函数
function initMap() {
    var mapOptions = {};
    mapOptions.center = {lat: 48.856613, lng: 2.352222};
    mapOptions.zoom = 9;
    
    // 初始化地图
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);

    // 初始化marker标记
    mMarker = new HWMapJsSDK.HWMarker({
        map: map,
        position: {lat: 48.85, lng: 2.35},
        zIndex: 10,
        label: {
            text: 'A',
            offsetY: -30,
            fontSize: '20px'
        },
        icon: {
            opacity: 0.5,
            scale: 1.2,
        }
    });
}

以上代码在48.85°N，2.35°E的位置上添加了一个label为“A”图标透明度为0.5的标记，如图所示：

关于markerOptions支持的自定义属性见MarkerOptions。

自定义标记

调用HWMapJsSDK.HWMarker(markerOptions)时，通过icon属性设置自定义图标。

mMarker = new HWMapJsSDK.HWMarker({
    map: map,
    position: {lat: 48.85, lng: 2.35},
    label: {
        text: 'A',
        color: '#ffffff',
    },
    // 设置自定义图标
    icon: {
        scale: 2,
        // 图片地址
        url: 'location-marker.png'
    }
});

删除标记

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

mMarker.setMap(null);

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

mMarker.setMap(null);
mMarker = null;

修改标记

通过HWMarker提供的方法对属性进行修改。例如调用setPosition(position)方法修改标记位置：

<tr>
    <td>Marker Lat:</td>
    <td><input id="markerLatInput" type="text" value="48"/></td>
</tr>
<tr>
    <td>Marker Lng:</td>
    <td><input id="markerLngInput" type="text" value="1.5"/></td>
</tr>
<script>
    var lat = Number(document.getElementById("markerLatInput").value);
    var lng = Number(document.getElementById("markerLngInput").value);
    mMarker.setPosition({lat: lat, lng: lng});
</script>

标记的以下属性支持自定义，具体请参见HWMarker方法。

标记事件

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

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

function handleClick() {
      alert("On Marker Click!");
}
mMarker.addListener('click', handleClick);

可拖动标记

function initMap() {
    var mapOptions = {};
    mapOptions.center = {lat: 48.856613, lng: 2.352222};
    mapOptions.zoom = 9;
    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
    // 在地图上放置一个可拖动的标记
    const marker = new HWMapJsSDK.HWMarker({
        map,
        position:{lat: 48.856613, lng: 2.352222},
        draggable:true
    })
}

动画标记

为标记添加动画功能，请调用HWMapJsSDK.HWMarker(markerOptions)时，设置MarkerOptions中的animation属性，选择标记动画的方式：

• DROP：首次放置标记时从上往下坠落。
• BOUNCE：弹跳动画。

function initMap() {
    var mapOptions = {};
    mapOptions.center = {lat: 48.856613, lng: 2.352222};
    mapOptions.zoom = 9;
    mapOptions.language = 'en'

    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);

    marker = new HWMapJsSDK.HWMarker({
        map: map,
        position: {lat: 48.856613, lng: 2.352222},
        icon: {
            scale: 1,
            url: 'imageurl'
        },
        // 指定标记动画方式
        animation: 'DROP',
    });
}

图1 DROP

图2 BOUNCE

如果使用MVVM模式的组件化开发，在将要销毁前的生命周期内需要调用marker.setAnimation(null)及时销毁动画。

marker.setAnimation(null); 

文字描边

在地图上多个标记叠加或者在深色背景上显示标记时，文字注记由于没有描边导致显示效果重叠不清晰，描边则可以改善其显示效果。请调用HWMapJsSDK.HWMarker(markerOptions)时，设置MarkerLabelOption中的strokeColor与strokeWeight属性进行描边。

function initMap() {
    var mapOptions = {};
    mapOptions.center = {lat: 48.856613, lng: 2.352222};
    mapOptions.zoom = 9;
    mapOptions.language = 'en'

    map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);

    marker = new HWMapJsSDK.HWMarker({
        map: map,
        position: {lat: 48.856613, lng: 2.352222},
        zIndex: 10,
        icon: {
            scale:1,
            url:'imageurl'
        },
        label: {
            text:'A',
            // 文字描边，默认#FFF
            strokeColor: '#00bcd4',
            // 描边大小，默认0
            strokeWeight: 1
        },
    });
}