高德地图海量点 API 初探
高德地图提供了地图上标记海量点的 API，具体内容和其他 API 可见官网高德地图 Js API 。
但是官网的文档实在太大了，而且各种链接有点隐蔽，看起来很费事。所以这里主要是对着一段 html 代码简要介绍一下。
talk is cheap, show me the code!
开始，第一块不解释：
<!DOCTYPE html>
<html lang="en">
头部，基本上不用修改：
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>海量点</title>
<link
rel="stylesheet"
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
/>
<style>
html,
body,
#container {
height: 100%;
width: 100%;
}
.input-card .btn {
margin-right: 1.2rem;
width: 9rem;
}
.input-card .btn:last-child {
margin-right: 0;
}
</style>
</head>
body 部分开头，API 啥的，注意替换你的 key
<body>
<div id="container" class="map" tabindex="0"></div>
<script
type="text/javascript"
src="https://a.amap.com/jsapi_demos/static/citys.js"
></script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=这里换成你申请的key"
></script>
接下来，地图和点的具体样式（如果有特殊需求，建议使用自定义地图）
<script type="text/javascript">
var map = new AMap.Map("container", {
zoom: 12, // 加载后的放大倍数
center: [118.00, 32.00], // 加载后显示的位置
mapStyle: "amap://styles/你选择的地图", // 可以选现成的也可以自定义地图
showLabel: false, // 不显示文字
});
var style = [
// 三种点标记样式，可以随意修改，后面添加点的时候会用到 style
{
url: "你的点标记图片链接1",
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(9, 9),
},
{
url: "你的点标记图片链接2",
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(9, 9),
},
{
url: "你的点标记图片链接3",
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(9, 9),
},
];
var mass = new AMap.MassMarks(citys, {
opacity: 1,
zIndex: 111,
cursor: "pointer",
style: style,
});
map.setFeatures("road"); // 显示道路
// 支持的Features："bg" 区域面、"point" 兴趣点、"road" 道路及道路标注、"building" 建筑物
</script>
添加海量点，注意替换经纬度
<script>
var data = [
// style 后面对应的就是之前设定的点标记样式
{ lnglat: [longitude, latitude], style: 1 },
{ lnglat: [longitude, latitude], style: 2 },
{ lnglat: [longitude, latitude], style: 3 },
]
mass.setData(data);
</script>
生成地图，大功告成
<script>
mass.setMap(map);
</script>
</body>
</html>
大致效果如下（我在自定义地图的时候只保留了道路）
