大家好，又见面了，我是你们的朋友全栈君。
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <style type="text/css"> body,html,#container{ height: 100%; margin: 0px; } </style> <title>快速入门</title> <style> @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotate { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-webkit-keyframes rotate2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotate2 { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotate2 { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .windmill2 { display: inline-block; position: relative; width: 100px; height: 50px; box-sizing: content-box; position: absolute; } .windmill2 .pillar { position: absolute; top: 8px; left: 47px; display: block; height: 0; width: 4px; border-width: 0 2px 25px 2px; border-style: none solid solid; box-sizing: content-box; } .windmill2 .axis { position: absolute; top: 0px; left: 46px; width: 4px; height: 4px; border-width: 3px; border-style: solid solid solid; /*background: #000 !important;*/ border-radius: 5px; z-index: 88; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -webkit-animation: rotate 2s linear infinite; -moz-animation: rotate 2s linear infinite; -o-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; box-sizing: content-box; } .windmill2 .swing { position: absolute; top: 1px; left: -2px; display: block; height: 0; width: 2px; border-width: 20px 2px 0px 2px; border-style: solid solid none; /*border-color: #000 transparent transparent ;*/ /*box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);*/ -webkit-transform-origin: 0px 0px; -webkit-transform: rotate(60deg); -moz-transform-origin: 0px 0px; -moz-transform: rotate(60deg); -ms-transform-origin: 0px 0px; -ms-transform: rotate(60deg); -o-transform-origin: 0px 0px; -o-transform: rotate(60deg); transform-origin: 0px 0px; transform: rotate(60deg); box-sizing: content-box; } .windmill2 .swing2 { position: absolute; top: 0px; left: 4.5px; display: block; height: 0; width: 2px; border-width: 20px 2px 0px 2px; border-style: solid solid none; /*border-color: #000 transparent transparent ;*/ -webkit-transform-origin: 0px 0px; -webkit-transform: rotate(180deg); -moz-transform-origin: 0px 0px; -moz-transform: rotate(180deg); -ms-transform-origin: 0px 0px; -ms-transform: rotate(180deg); -o-transform-origin: 0px 0px; -o-transform: rotate(180deg); transform-origin: 0px 0px; transform: rotate(180deg); box-sizing: content-box; } .windmill2 .swing3 { position: absolute; top: 6px; left: 3px; display: block; height: 0; width: 2px; border-width: 20px 2px 0px 2px; border-style: solid solid none; -webkit-transform-origin: 0px 0px; -webkit-transform: rotate(300deg); -moz-transform-origin: 0px 0px; -moz-transform: rotate(300deg); -ms-transform-origin: 0px 0px; -ms-transform: rotate(300deg); -o-transform-origin: 0px 0px; -o-transform: rotate(300deg); transform-origin: 0px 0px; transform: rotate(300deg); box-sizing: content-box; } .windmill2 .text { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; } .windmill2_green{ border-color:green transparent transparent; } .windmill2_greenPiller{ border-color:transparent transparent green ; } .windmill2_backgreen{ background:green !important; } .windmill2_red{ border-color:red transparent transparent; } .windmill2_redPiller{ border-color:transparent transparent red ; } .windmill2_backred{ background:red !important; } .windmill2_gray{ border-color:gray transparent transparent; } .windmill2_grayPiller{ border-color:transparent transparent gray ; } .windmill2_backgray{ background:gray !important; } .amap-marker-content{ width:100px; height:100px; } </style> </head> <body> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=594b6477c45ab2dd32ae8685deb971f7"></script> <div id="container"></div> <script> function windmap(provinces){ var map = new AMap.Map("container", { resizeEnable: true, center: [116.40, 39.91], zoom: 13 }); var marker = []; for(var i = 0; i < provinces.length; i += 1){ var markerContent= '<span style="left:20%;top:80%;" class="windmill2 windmill2-green">' + '<span class="pillar windmill2_grayPiller"></span>' + '<span class="axis windmill2_gray windmill2_backgray">' + '<span class="swing windmill2_gray"></span>' + '<span class="swing2 windmill2_gray"></span>' + '<span class="swing3 windmill2_gray"></span>' + '</span>'+ '<span class="text">'+provinces[i].name+'</span>'+ '</span>'; marker = new AMap.Marker({ content: markerContent, /*position: provinces[i].center.split(','),*/ title: provinces[i].name, offset: new AMap.Pixel((i*100),0), clickable:true, map: map }); //点标注的点击事件 marker.on('click', function(e){ alert(1); }); } } window.onload = function(){ var marker= [{ "center":"-100,200","name":"1"},{ "center":"0,200","name":"2"}]; windmap(marker); } </script> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143283.html原文链接：https://javaforall.net
