高德地图添加多个点标注的点击事件
大家好，又见面了，我是你们的朋友全栈君。
<!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.cn/143283.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读