Skip to content

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ỉnhMarker với mặt phẳng của bản đồ. viewport căn chỉnhMarker với mặt phẳng của khung nhìn. auto tự động đối sánh với giá trị củaRotationAlignment.
options.rotationAlignment string
default: 'auto'
map sắp xếp vòng quay củaMarker so với bản đồ, duy trì một hướng khi bản đồ xoay. viewport căn chỉnh cách xoay củaMarker so với chế độ xem, không phù hợp với việc xoay bản đồ. auto tương đương vớiviewport.

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 truenế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);
    });