Marker

User interface elements that can be added to the map.

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

parameter

name	type	describe
legacyOptions	Object	Required
options	Object	Requiredparameter Name Type Default Description anchor String center Optionalset up Marker Location. Options include "center"， "top"， "bottom"， "left"， "right"， "top-left"， "top-right"， "bottom-left"，and "bottom-right"。 clickTolerance Number 0 OptionalUser is clicking Marker The maximum number of pixels the mouse pointer can be moved for it to be considered a valid click (the same as Marker Drag the opposite). The default value is to inherit the map clickTolerance。 color String #3FB1CE Optionalif not provided options.element，The default color is used. draggable Boolean false OptionalIndicates whether the Marker Drag to a new location on the map. element HTMLElment Optionalused as mark DOM element. The default value is light blue, drop-shaped SVG mark. offset PointLike Optionalas PointLike The object’s offset, in pixels, relative to the element’s center point. Negative numbers mean up and left. pitchAlignment String auto Optional "map" Will Marker Aligned to the plane of the map."viewport" Will Marker Aligned to the plane of the viewport."auto" automatic matching rotationAlignment value. rotation Number 0 OptionalMarker relative to their respective rotationAlignment The rotation angle of the setting in degrees. A positive value means that Marker Rotate clockwise. rotationAlignment String auto OptionalMarker rotational alignment,"map" make Marker Aligns the rotation relative to the map plane, consistent with the cardinal direction of the map rotation. "viewport" make Marker Aligns the rotation relative to the viewport plane, regardless of map rotation."auto" Equivalent to "viewport"。 scale Number 1 Optionalif not provided options.element，The default scale is used. The default scale corresponds to the height 41px and width 27px。

Case

var marker = new mapmost.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

// Set options
var marker = new mapmost.Marker({
    color: "#FFFFFF",
    draggable: true
  }).setLngLat([30.5, 50.5])
  .addTo(map);

Instance members

addTo

Will Marker Add to map.

parameter

name	type	describe
map	Map	Requiredto add Marker of Mapmost GL JSmap.

Case

var marker = new mapmost.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map); // Will Marker Add to map

getElement

return Marker of HTML element.

Case

const element = marker.getElement();

getLngLat

Get the geographical location of the marker.

Case

// Will marker The latitude and longitude coordinates are stored in a variable
var lngLat = marker.getLngLat();
// Print on console marker The latitude and longitude value of
console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )

getOffset

Get the offset of the marker.

Case

const offset = marker.getOffset();

getPopup

Returns bound to Marker of Popup Example.

Case

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

console.log(marker.getPopup()); // return popup Example

remove

Remove from map Marker。

Case

var marker = new mapmost.Marker().addTo(map);
marker.remove();

setLngLat

Set the marker’s geolocation and move it.

parameter

name	type	describe
lnglat	Lnglat	RequiredMarker The position after movement.

Case

// create a new marker，Set the latitude and longitude and add it to the map.
new mapmost.Marker()
    .setLngLat([-65.017, -16.457])
    .addTo(map);

setPopup

Will Popup bind to Marker。

parameter

name	type	describe
popup	Popup	Requiredif undefined or for null，Then unbind here Marker All on the instance Popup。

Case

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>")) // Add to popup
    .addTo(map);

togglePopup

Turn on or off binding to Marker of Popup instance, depending on Popup current status.

Case

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

marker.togglePopup(); // switch popup open or close

event

drag

Fired when dragging.

 

dragend

Fires when the marker has finished dragging.

 

dragstart

Fired when dragging starts.