android高德地图marker图标,图标样式-字体图标标注-示例中心-JS API UI 组件示例 | 高德地图API...

图标样式

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;

}