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

高德地图添加多个点标注的点击事件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)


相关推荐

  • JDBC_3 数据库事物

    JDBC_3 数据库事物数据库事务数据一旦提交,就不可回滚那些操作会导致数据的自动提交?DDL操作一旦执行,都会自动提交-. set autocommit = false不起作用DML默认情况下,一旦执行就会自动提交-. 可以设置set autocommit = false关闭连接的时候会自动提交 Connection connection = DriverManager.getConnection(url, user, password); connection.setAutoCommit

  • XSS(跨站脚本攻击)相关内容总结整理

    XSS的攻击相关资料整理文章目录XSS的攻击相关资料整理跨站脚本攻击(XSS)XSS 简介XSS 危害XSS 原理XSS 分类XSS 防御总结XSS 问答参考资料跨站脚本攻击(XSS)XSS 简介人们经常将跨站脚本攻击(Cross Site Scripting)缩写为CSS,但这会与层叠样式表(Cascading Style Sheets,CSS)的缩写混淆。因此,有人将跨站脚本攻击缩写为XSS。跨站脚本攻击(XSS),是最普遍的Web应用安全漏洞。这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户

  • linux直接运行py文件_linux的系统调用

    linux直接运行py文件_linux的系统调用python下编译py成pyc和pyo(文件加密)需要注意的是,编译成pyc或者pyo文件后需要将命名改成与源Python命名一致,将其放在源目录下,虽然其他python文件调用pyd时显示不能检测到该模块,但实际上可以运行。由于pyc的编译收到python版本的影响,所以当将编译后的pyc迁移到另一台电脑中时,最好保持python环境一致。将python文件.py编译成pyc二进制文件:pyt…

    2022年10月24日
  • Integer转string、字符串数组

    [b]方式一:库的字符串输入输出流方式,写入int值,之后调用输出流对象的str方法来转成string。[/b]优点是对转换可以做一些格式化。[code="c++"]inti=10;ostringstreamoss;oss…

  • 论dts中的of_platform_populate如何选择性加载device node为platform device

    论dts中的of_platform_populate如何选择性加载device node为platform device论dts中的of_platform_populate如何选择性加载devicenode为platformdevice2016-01-2114:26909人阅读评论(0)收藏举报本文章已收录于:分类:android源码(66)作者同类文章Xlinux(60)作者同类文章X

  • keil如何生成bin文件_keil生成bin

    keil如何生成bin文件_keil生成binMDK生成bin文件方式fromelf.exe –bin-o"$L@L.bin""#L"

    2022年10月20日

发表回复

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

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