Elastic Marker

This article introduces how to use the AMap.ElasticMarker plugin to create elastic markers, which can change icon styles based on the map's zoom level, thereby providing a richer and more personalized display effect when users zoom the map.

Elastic Marker Example

1、Add Elastic Marker

1.1 Create Map

var map = new AMap.Map('container', {
  zoom: 10, 
  showOversea: true, //Enable world Map
  center: [77.19, 28.59] 
});

Go to display the map to understand the complete map creation

1.2 Create Style List

var stylesArray = [
  {
    icon: { //Icon Style
      img: "https://a.amap.com/jsapi_demos/static/resource/img/men3.png",
      size: [16, 16], //Original Size of Icon
      anchor: "bottom-center", //Anchor Position
      fitZoom: 14, //The most suitable level to display the icon in its original size
      scaleFactor: 2, //Scaling factor for one level of map zoom
      maxScale: 2, //The maximum zoom in scale of the image, as the map zooms in, the icon will zoom in accordingly, with a maximum of 2
      minScale: 1, //The minimum zoom out scale of the image, as the map zooms out, the icon will zoom out accordingly, with a minimum of 1
    },
    label: { //Text Annotation
      content: "Hundred Flowers Hall", //Text content
      position: "BM", //The reference point of the text position relative to the icon, \"BM\" is the bottom center
      minZoom: 15, //The minimum display level of the label, that is, the text annotation will only be displayed at map level 15 and above
    },
  },
  {
    icon: {
      img: "https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png",
      size: [48, 63],
      anchor: "bottom-center",
      fitZoom: 17.5,
      scaleFactor: 2,
      maxScale: 2,
      minScale: 0.125,
    },
    label: {
      content: "Longevity Pavilion",
      position: "BM",
      minZoom: 15,
    },
  },
];

Prompt

Each object in the stylesArray represents the style settings of a point marker. For example, the first object represents the landmark style of "Hundred Flowers Hall", and the second object represents the landmark style of "Longevity Pavilion".

1.3 Create level mapping for style list

var zoomStyleMapping = {
  14: 0, //Levels 14-17 use style 0
  15: 0,
  16: 0,
  17: 0,
  18: 1, //Levels 18-20 use style 1
  19: 1,
  20: 1,
};

Prompt

zoomStyleMapping defines the display of different point marker styles at the corresponding zoom levels of the map. When the zoom level is 14-17, the 0th style element in the style array (the landmark style of "百花殿" in this example) will be used. When the zoom level is 18-20, the 1st style element (the landmark style of "万寿亭" in this example) will be used.

1.4 Load the flexible point marker plugin

It is recommended to use asynchronous installation plugins, the method of plugin introduction and plugin usage.

AMap.plugin(["AMap.ElasticMarker"], function () {
  var elasticMarker = new AMap.ElasticMarker({
    position: [77.19, 28.59], 
    styles: stylesArray, //Specify the style list
    zoomStyleMapping: zoomStyleMapping, //Specify the mapping of zoom and style
  });
  map.add(elasticMarker); 
  map.setFitView(); //Zoom the map to the appropriate level of view
});

View all attributes and methods

2、Description of properties and methods involved in this chapter

2.1 AMap.ElasticMarker

parameters/methods			Description	Type
position			The position where the point marker is displayed on the map	Supports passing in a longitude and latitude object or a one-dimensional array of longitude and latitude, such as AMap.LngLat(77.19,28.59) or [77.19,28.59].
styles			Array of multiple different styles	Array
	icon		Flexible labeling icon style type	ElasticIcon
		img	Icon URL	String
		size	Original Size of Icon	Vector
		anchor	Position of the anchor point at the original size of the icon	String
		fitZoom	The most appropriate level where it displays at the original size	Number
		scaleFactor	Scale factor for zooming in one level on the map	Number
		maxScale	Maximum zoom level	Number
		minScale	Minimum zoom level	Number
	label		Flexible labeling of text style types	ElasticLabel
		content	Text content	String
		position	Reference point of text position relative to the icon, optional values: BL, BM, BR, ML, MR, TL, TM, TR represent the bottom left, center bottom, bottom right, center left, center right, top left, center top, top right respectively	String
		minZoom	Minimum display level of label	String
zoomStyleMapping			Mapping of zoom and styles	Object

View all AMap.ElasticMarker properties and methods