Marker

Hỗ trợ thêm các đối tượng marker tùy chỉnh lên bản đồ

new Marker(options: Object?, legacyOptions: Options?)

Tham số cơ bản

Name	Description
`options.element` HTMLElement	Thành phần DOM để thêm marker, mặc định là icon màu hình giọt nước màu lam nhạt.
`options.anchor` string default: `center`	Điểm neo đánh dấu vị trí đặt marker. Các tham số `'center'` , `'top'` , `'bottom'` , `'left'` , `'right'` , `'top-left'` , `'top-right'` , `'bottom-left'` , và`'bottom-right'` .
`options.offset`	Độ lệnh tính bằng pixel
`options.color` default: `'#3FB1CE'`	Màu sẽ sử dụng cho marker mặc định là màu xanh lam nhạt.
options.scale number default: `1`	Tỷ lệ để sử dụng cho marker mặc định nếu options.element không được thiết lập. Tỷ lệ mặc định tương ứng với chiều cao là `41px` và chiều rộng là`27px`.
options.draggable boolean default: `false`	Tham số xác định có thể kéo một điểm đánh dấu đến vị trí mới trên bản đồ hay không.
options.rotation number default: `0`	Góc quay của marker tính bằng độ, so với cài đặt `RotationAlignment` tương ứng của nó. Giá trị dương sẽ xoay marker theo chiều kim đồng hồ.
options.pitchAlignment string default: `'auto'`	`map` căn chỉnh`Marker` với mặt phẳng của bản đồ. `viewport` căn chỉnh`Marker` với mặt phẳng của khung nhìn. `auto` tự động đối sánh với giá trị của`RotationAlignment`.
options.rotationAlignment string default: `'auto'`	`map` sắp xếp vòng quay của`Marker` so với bản đồ, duy trì một hướng khi bản đồ xoay. `viewport` căn chỉnh cách xoay của`Marker` so với chế độ xem, không phù hợp với việc xoay bản đồ. `auto` tương đương với`viewport`.

Hàm

Function	Description
`addTo(map)`	Thêm marker lên Map Parameters: map Returns: Marker: this
`getElement()`	Trả về phần tử HTML của marker
`getLngLat()`	Nhận vị trí địa lý của marker. Kinh độ của kết quả có thể khác bội số 360 độ so với kinh độ được setLngLat đặt trước đó vì Marker bao bọc kinh độ cố định trên các bản sao của thế giới để giữ cho marker trên màn hình. Returns: LngLat
`isDraggable()`	Trả lại `true`nếu marker kéo thể kéo Returns: boolean: True if the marker is draggable.
`remove()`	Xóa marker khỏi bản đồ `marker.remove();`
`setDraggable(boolean)`	Đặt thuộc tính có thể kéo vào marker setDraggable(true): Cho phép kéo marker setDraggable(false): Không cho phép kéo marker
`setLngLat()`	Thiết lập vị trí đặt marker hoặc di chuyển Ví dụ: `setLngLat([105.82387887026971, 21.042387911156695])`

Example:

Thêm 1 marker tùy chỉnh lên bản đồ

var marker = new wemapgl.Marker()
            .setLngLat([105.82387887026971, 21.042387911156695])
            .addTo(map);

Event

drag

Kích hoạt khi marker bị kéo (dragged)

dragend

Kích hoạt khi marker được kéo xong

dragstart

Kích hoạt khi quá trình kéo bắt đầu

Thêm marker từ một file geojson

Ex1: Thiết lập icon tĩnh

style để show marker

/* style.css */
.marker {
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/9e/Pin-location.png');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }

geojson data

let geojson = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [105.9538, 21.0223]
                },
                'properties': {
                    'title': 'Marker title 1',
                    'description': 'Marker 1'
                }
            },
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [105.7599, 21.0299]
                },
                'properties': {
                    'title': 'Marker title 2',
                    'description': 'Marker 2'
                }
            }
        ]
    };

Thêm marker lên bản đồ

// add markers to map
    geojson.features.forEach(function (marker) {
        // create a HTML element for each feature
        let el = document.createElement('div');
        el.className = 'marker';
        // make a marker for each feature and add it to the map
        new wemapgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .setPopup(
                new wemapgl.Popup({ offset: 25 }) // add popups
                    .setHTML(
                        '<h3>' +
                        marker.properties.title +
                        '</h3><p>' +
                        marker.properties.description +
                        '</p>'
                    )
            )
            .addTo(map);
    });

Ex2: Thiết lập icon động

style

.marker {
            display: block;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            padding: 0;
        }

geojson data

var geojson = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {
                    'message': 'Foo',
                    'iconSize': [60, 60]
                },
                'geometry': {
                    'type': 'Point',
                    'coordinates': [-66.324462890625, -16.024695711685304]
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'message': 'Bar',
                    'iconSize': [50, 50]
                },
                'geometry': {
                    'type': 'Point',
                    'coordinates': [-61.2158203125, -15.97189158092897]
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'message': 'Baz',
                    'iconSize': [40, 40]
                },
                'geometry': {
                    'type': 'Point',
                    'coordinates': [-63.29223632812499, -18.28151823530889]
                }
            }
        ]
    };

Thêm marker lên bản đồ

// add markers to map
    geojson.features.forEach(function (marker) {
// create a DOM element for the marker
        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage =
            'url(https://placekitten.com/g/' +
            marker.properties.iconSize.join('/') +
            '/)';
        el.style.width = marker.properties.iconSize[0] + 'px';
        el.style.height = marker.properties.iconSize[1] + 'px';

        el.addEventListener('click', function () {
            window.alert(marker.properties.message);
        });

// add marker to map
        new wemapgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
    });