高德地图mark按类型批次显示不同的颜色
1、header引入高德地图JS，并携带高的账户的应用KEY
2、建立地图
var map = new AMap.Map('container', {
zoom: 12,
center: [中心点经纬度],
});
3、设定mark图标样式
var style = [{
url: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(26, 42),
zIndex: 3,
}, {
url: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(16, 32),
zIndex: 2,
}, {
url: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(15,20),
zIndex: 1,
}
];
此处不了解什么时候用大中小图标
4、获得数据点的经纬度，label名称，使用的样式
var shops=[这里是后台提供的数据点集合];
var mass = new AMap.MassMarks(shops, {
opacity: 0.8,
zIndex: 111,
cursor: 'pointer',
style: style
});
var marker = new AMap.Marker({content: ' ', map: map});
mass.on('mouseover', function (e) {
marker.setPosition(e.data.lnglat);
marker.setLabel({content: e.data.name})
});
mass.setMap(map)；
集合的元素json格式：
{lnglat:[经纬度],name:"鼠标点击显示的MARK文字",style:2}