找到解决方案了,使用的是高德api的SvgMarker,效果:代码如下: AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker) => { if (!SvgMarker.supportSvg) { //当前环境并不支持SVG,此时SvgMarker会回退到父类,即SimpleMarker alert('当前环境不支持SVG'); } let Array = [ { Shape:{height:60,width:20,fillColor:'red',id:'1'}, mr: { zIndex: 120,title:"上石化边界卫六路站1", id:'1', position:[121.47567708984376, 31.22694067865231] }, SvgMarker: [ {height:130,width:20,zIndex: 110,position:[121.47567708984376, 31.22694067865231],fillColor:"yellow",id:'1'}, {height:140,width:20,zIndex: 100,position:[121.47567708984376, 31.22694067865231],fillColor:"green",id:'1'} ] }, { Shape:{height:60,width:20,fillColor:'green',id:'2'}, mr: { zIndex: 120,title:"上石化边界卫六路站2", id:'2', position:[121.48567708984376, 31.22694067865231] }, SvgMarker: [ {height:130,width:20,zIndex: 110,position:[121.48567708984376, 31.22694067865231],fillColor:"blue",id:'2'}, {height:140,width:20,zIndex: 100,position:[121.48567708984376, 31.22694067865231],fillColor:"pink",id:'2'} ] } ] for (let i = 0; i < Array.length; i++) { var Shape = new SvgMarker.Shape.SquarePin({ height: Array[i].Shape.height, //高度 data:Array[i].Shape.id, width: Array[i].Shape.width, //不指定,维持默认的宽高比 fillColor: Array[i].Shape.fillColor, //填充色 strokeWidth: 1, //描边宽度 strokeColor: '#ccc', //描边颜色 }); let ShapeClick = new SvgMarker(Shape, { zIndex: Array[i].mr.zIndex, map: map, data:Array[i].mr.id, position: Array[i].mr.position, showPositionPoint: true, label: { content: Array[i].mr.title, offset: new AMap.Pixel(-50, 64), } }); ShapeClick.on('click',this.ShapeClick) for (let j = 0; j < Array[i].SvgMarker.length; j++) { let n = new SvgMarker(new SvgMarker.Shape.SquarePin({ height: Array[i].SvgMarker[j].height, //高度 width: Array[i].SvgMarker[j].width, fillColor: Array[i].SvgMarker[j].fillColor }), { data:Array[i].SvgMarker[j].id, zIndex: Array[i].SvgMarker[j].zIndex, map: map, position: Array[i].SvgMarker[j].position, showPositionPoint: true }); n.on('click',this.ShapeClick) } } });
找到解决方案了,使用的是高德api的SvgMarker,

效果:
代码如下: