Custom Point Marker

This article explains how to set up a custom point marker AMap.Marker and how to change its style, icon, and content, including:

1. Custom Icon Point Marker
2. Custom Content Point Marker

Custom Icon Example

1、User Guide

1.1 Create Map

const map = new AMap.Map("container", {
  viewMode: "2D",
  zoom: 11,
  showOversea: true, //Enable world Map
  center: [100.491422, 13.749313],
});

1.2 Create a Marker with a custom icon URL

Prepare the accessible icon URL, set the icon attribute to display the custom icon.

const marker = new AMap.Marker({
  position: new AMap.LngLat(100.437177, 13.814333),
  offset: new AMap.Pixel(-10, -10),
  icon: "//vdata.amap.com/icons/b18/1/2.png", //Add icon URL
  title: "title",
});
map.add(marker);

1.3 Create a Marker with the specified Icon instance

Prepare an online accessible URL image to create an Icon instance. This method allows you to set icon size, imageOffset, and other properties, making it more flexible than simply setting a URL.

//Create an AMap.Icon instance:
const icon = new AMap.Icon({
  size: new AMap.Size(25, 34), //Icon size
  image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //The image of the Icon
  imageOffset: new AMap.Pixel(-9, -3), //The offset of the image relative to the display area, suitable for sprites, etc
  imageSize: new AMap.Size(135, 40), //Stretch or compress the image according to the set size
});
// Add the Icon instance to the marker:
const marker = new AMap.Marker({
  position: new AMap.LngLat(100.437177, 13.814333), //Position of the point marker
  offset: new AMap.Pixel(-13, -30), 
  icon: icon, //Add Icon instance
  title: "title",
  zooms: [2, 12], //The hierarchical range of point markers display, beyond the range will not show
});
map.add(marker);

1.4 Create a custom content Marker

For more complex marker displays, we can use the content property of AMap.Marker. The content property takes a user-defined DOM node or an HTML fragment of a DOM node. The content property is more flexible than the icon property. Setting the content property will override the icon property.

const content = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
</div>`;
const marker = new AMap.Marker({
  content: content, //Custom Point Marker Overlay Content
  position: [100.437177, 13.814333], //Base Point Position
  offset: new AMap.Pixel(-13, -30), //Offset Position Relative to the Base Point
});
map.add(marker);

<style>
.custom-content-marker {
  width: 25px;
  height: 34px;
}
.custom-content-marker img {
  width: 100%;
  height: 100%;
}
</style>

2、Description of properties and methods involved in this chapter

2.1 AMap.Marker

2.2 AMap.Icon