高德地图添加多个点标注的点击事件

高德地图添加多个点标注的点击事件html>charset=”utf-8″>http-equiv=”X-UA-Compatible”content=”chrome=1″>name=”viewport”content=”initial-scale=1.0,user-scalable=no,width=device-width”>type=”text/css”>bod

大家好,又见面了,我是你们的朋友全栈君。

<!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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143283.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • oracle罗马字符转数字,一些关于罗马字符的知识

    oracle罗马字符转数字,一些关于罗马字符的知识I=1V=5X=10L=50C=100D=500M=1000下面是关于构造罗马数字的一些通用的规则的介绍:字符是叠加的。I表示1,II表示2,而III表示3。VI表示6(字面上为逐字符相加,“5加1”),VII表示7,VIII表示8。含十字符(I、X、C和M)至多可以重复三次。对于4,你则需要利用下一个最大的含五字符进行减操作得…

  • 别踩坑!使用MySQL唯一索引请注意「建议收藏」

    别踩坑!使用MySQL唯一索引请注意「建议收藏」背景在程序设计中了,我们往往需要确保数据的唯一性,比如在常见的注册模块,我们需要确保一个手机号只能注册为一个账号。这种情况下,我们的程序往往是第一道关卡,用户来注册之前,首先判断这个手机号是否已经注册,如果已经注册则返回错误信息。但是我们不能确保同时有两个人使用同一个手机号注册到我们的系统中,因此这里就需要在更深的层次去确保手机号的唯一性了。不同存储方案,解决方式不一样,这里以MySQL为例,我…

  • Java IO 和 NIO的区别

    Java IO 和 NIO的区别主要区别IONIO面向字节流面向缓冲区阻塞基于Selector的非阻塞JavaIO和NIO的主要区别体现在以上两个方面,以下详细说明这些区别的具体含义。面向流和面向缓冲区这个概念和编程方法中的面向过程、面向对象类似。JavaIO是面向流的而JavaNIO是面向缓冲区的。在JavaIO中读取数据和写入数据是面向流(Stream)的,这表示当我们从流中读取数据,写入数据时也将其写入流,流…

  • SD卡、TF卡、MMC卡以及eMMC芯片的介绍「建议收藏」

    SD卡、TF卡、MMC卡以及eMMC芯片的介绍「建议收藏」一、SD卡   1、简介       SD卡为SecureDigitalMemoryCard,即安全数码卡,是一种基于半导体快闪记忆器的新一代记忆设备。它在MMC的基础上发展而来,增加了两个主要特色:SD卡强调数据的安全,可以设定所储存的使用权限,防止数据被他人复制;另外一个特色就是传输速度比2.11版的MMC卡快。   2、外观及引脚定义   3、特性

  • Java面试题全集(上)

    Java面试题全集(上)2013年年底的时候,我看到了网上流传的一个叫做《Java面试题大全》的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不少的参考答案也是错误的,于是我花了半个月时间对这个所谓的《Java面试大全》进行了全面的修订并重新发布在我的CSDN博客。

  • 无人机——舵机篇(七)[通俗易懂]

    无人机——舵机篇(七)[通俗易懂]文章目录1.舵机的基本知识2.舵机的组成3.舵机的工作原理1.舵机的基本知识舵机就是一种有输出轴的小传动装置。这个输出轴能够通过向舵机输入一个编码信号而定位到我们指定的角度位置。只要这个编码信号存在于信号输入线上,舵机就将保持输出轴的当前角度位置不变。一旦编码信号改变,输出轴的角度位置也将跟着改变。实际中,舵机被用于控制无人机升降尾翼、方向尾翼等的位置。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号