高德地图JS API深入浅出：自定义地图点聚合、样式、图标、窗体信息

前端

2023-06-20 09:17:20

高德地图 JS API 进阶应用：打造酷炫个性化地图

简介

准备好探索高德地图 JS API 的进阶应用了吗？这些功能将使你的地图应用程序更加令人惊叹和个性化。从基础的标点到高级的换肤，我们将一步步深入，打造独一无二的地图体验。

1. 地图标点

普通标点

使用 setMarker 方法在地图上轻松添加标点。选择合适的标点类型，包括普通标点、可拖拽标点和自定义标点。

聚合点

当标点数量众多时，聚合点功能可以防止地图混乱。使用 setCluster 方法将相邻标点聚合在一起，并显示聚合点数量。

2. 自定义图标

默认图标

高德地图 JS API 提供多种默认图标。但为了个性化你的地图，使用 setMarkerIcon 方法自定义图标。只需传入一个图片地址即可。

自定义图标

使用 AMap.Icon 类创建自定义图标。指定图片 URL、大小和其他属性，打造符合你品牌形象的独特图标。

3. 自定义窗体信息

信息窗体

当用户点击标点时，显示一个信息窗体，提供相关信息。使用 setInfoWindow 方法自定义窗体信息，并使用 setContent 方法设置窗体内容。

偏移量

使用 offset 属性设置窗体偏移量，避免与标点重叠。

4. 换肤

地图皮肤

高德地图 JS API 提供多种地图皮肤。使用 setMapStyle 方法切换皮肤，让你的地图焕然一新，符合你的品牌形象。

示例代码

// 1. 地图标点
var marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  title: '北京',
  icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
});
map.add(marker);

// 2. 聚合点
var cluster = new AMap.MarkerClusterer({
  gridSize: 80,
  maxZoom: 15
});
cluster.addMarkers(markers);
map.add(cluster);

// 3. 自定义图标
var marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  title: '北京',
  icon: new AMap.Icon({
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
    size: [24, 36]
  })
});
map.add(marker);

// 4. 自定义窗体信息
var infoWindow = new AMap.InfoWindow({
  content: '北京，中国首都',
  offset: new AMap.Pixel(0, -30)
});
marker.on('click', function() {
  infoWindow.open(map, marker.getPosition());
});

// 5. 换肤
map.setMapStyle('amap.china.blue');