图标样式
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
//创建地图
var map = new AMap.Map('container', {
zoom: 4
});
AMapUI.loadUI(['overlay/AwesomeMarker', 'overlay/SimpleMarker'],
function(AwesomeMarker, SimpleMarker) {
//icon的取值请见 http://fontawesome.io/icons/
var awIcons = [
'address-book',
'address-book-o',
'address-card',
'address-card-o',
'adjust',
'american-sign-language-interpreting',
'anchor',
'archive',
'area-chart',
'arrows',
'arrows-h',
'arrows-v',
'asl-interpreting',
'assistive-listening-systems',
'asterisk'
];
var iconStyles = SimpleMarker.getBuiltInIconStyles();
//获取一批grid排布的经纬度
var lngLats = getGridLngLats(map.getCenter(), 5, awIcons.length);
for (var i = 0, len = lngLats.length; i < len; i++) {
new AwesomeMarker({
//设置awesomeIcon
awesomeIcon: awIcons[i],
iconLabel: {
style: {
color: iconStyles[iconStyles.length - 1 - i],
fontSize: '14px'
}
},
//图标
iconStyle: iconStyles[i],
map: map,
position: lngLats[i],
title: 'awesomeIcon :' + awIcons[i]
});
}
});
AMap.plugin(['AMap.ToolBar'], function() {
map.addControl(new AMap.ToolBar({
map: map
}));
});
/**
* 返回一批网格排列的经纬度
* @param {AMap.LngLat} center 网格中心
* @param {number} colNum 列数
* @param {number} size 总数
* @param {number} cellX 横向间距
* @param {number} cellY 竖向间距
* @return {Array} 返回经纬度数组
*/
function getGridLngLats(center, colNum, size, cellX, cellY) {
var pxCenter = map.lnglatToPixel(center);
var rowNum = Math.ceil(size / colNum);
var startX = pxCenter.getX(),
startY = pxCenter.getY();
cellX = cellX || 70;
cellY = cellY || 70;
var lngLats = [];
for (var r = 0; r < rowNum; r++) {
for (var c = 0; c < colNum; c++) {
var x = startX + (c - (colNum - 1) / 2) * (cellX);
var y = startY + (r - (rowNum - 1) / 2) * (cellY);
lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
if (lngLats.length >= size) {
break;
}
}
}
return lngLats;
}
