html创建纯色背景,纯色背景-简单标注-示例中心-JS API UI 组件示例 | 高德地图API...

纯色背景

html,

body,

#container {

width: 100%;

height: 100%;

margin: 0px;

}

.amap-marker-label {

font-size: 13px;

border: 1px solid orange;

background: #fff;

border-radius: 10px 0 0 0;

color: #690441;

}

.color_bar {

width: 30px;

height: 18px;

}

/**

* 替换内置样式的图片

*/

.amap-simple-marker-def-style.my_color .amap-simple-marker-icon {

background-image: url('../assets/mbg_v2-fs8.png');

}

@media (min--moz-device-pixel-ratio: 1.5),

(-o-min-device-pixel-ratio: 3/2),

(-webkit-min-device-pixel-ratio: 1.5),

(min-device-pixel-ratio: 1.5),

(min-resolution: 1.5dppx) {

.amap-simple-marker-def-style.my_color .amap-simple-marker-icon {

background-image: url('../assets/mbg_v2@2x-fs8.png');

}

}

//创建地图

var map = new AMap.Map('container', {

zoom: 4

});

AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {

//内置的样式

var iconStyles = SimpleMarker.getBuiltInIconStyles('default');

if (typeof(console) !== 'undefined') {

console.log(iconStyles.join(', '));

}

//获取一批grid排布的经纬度

var lngLats = getGridLngLats(map.getCenter(), 5, iconStyles.length, 130, 70);

for (var i = 0, len = lngLats.length; i < len; i++) {

new SimpleMarker({

iconTheme:'default',

//添加自定义的class

containerClassNames: 'my_color',

//使用内置的iconStyle

iconStyle: iconStyles[i],

//图标文字

iconLabel: {

//A,B,C.....

innerHTML: String.fromCharCode('A'.charCodeAt(0) + i),

style: {

//颜色, #333, red等等，这里仅作示例，取iconStyle中首尾相对的颜色

color: iconStyles[len - 1 - i]

}

},

//显示定位点

//showPositionPoint:true,

map: map,

position: lngLats[i],

title: 'iconStyle: ' + iconStyles[i] + '_' + iconStyles[len - 1 - i],

//Marker的label,见https://lbs.amap.com/api/javascript-api/reference/overlay/#Marker

label: {

content: iconStyles[i] + '

// offset: new AMap.Pixel(27, 25)

}

});

}

});

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;

}