1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 31

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




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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143283.html原文链接：https://javaforall.net
赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 小米手机解BL锁、线刷详细教程，适用于小米全系列手机[通俗易懂]

    小米手机解BL锁、线刷详细教程，适用于小米全系列手机[通俗易懂]

    小米手机解BL锁、线刷详细教程，适用于小米全系列手机[通俗易懂][教程]小米手机解BL锁、线刷详细教程，适用于小米全系列手机这几天看到论坛里很多人在问怎么线刷，下面我就做个详细的线教程大家看一下高手别喷我哈此教程只适合刷官方MIUI包进入正题。第一步：解BL锁1.浏览器打开申请解锁小米手机点击立即解锁，然后再点击下载解锁工具，下载后保存到电脑也可以点击这里立即下载2.解压后双击miflash_unlock.exe打开手机解锁工具V3.33.点同意，然后登陆帐号，手机会检测您的帐号是否可以解锁，如果不支持点击申请解锁，好像是大约一周左右可以通过申

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月7日
    84
  • 微服务中的日志管理 — ELK

    微服务中的日志管理 — ELK

    微服务中的日志管理 — ELK通过使用微服务，我们能够解决许多在单体应用中暴露的问题，并且它允许我们创建稳定的分布式应用程序，并对代码，团队规模，维护，发布周期，云计算等进行所需要的控制。但同时微服务也引入了一些挑战，例如分布式日志管理和查看。需要提供在众多服务中查看分布的完整事务日志和分布式调试的能力。实际上，挑战在于微服务是相互隔离的，它们不共享公共数据库和日志文件。随着微服务数量的增加以及我们使用自动化持续集成工具实现…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月6日
    31
  • curl: (60) SSL certificate problem: unable to get local issuer certificate 错误

    curl: (60) SSL certificate problem: unable to get local issuer certificate 错误

    curl: (60) SSL certificate problem: unable to get local issuer certificate 错误

    全栈程序员-站长的头像 全栈程序员-站长
    2021年10月30日
    154
  • jQuery数据类型总结建议收藏

    jQuery数据类型总结建议收藏

    jQuery除了包含原生JS中的内置数据类型(built-indatatype)，还包括一些扩展的数据类型(virtualtypes)，如Selectors、Events等。1.StringS

    全栈程序员-站长的头像 全栈程序员-站长
    2021年12月21日
    35
  • Couchbase vs Redis，究竟哪个更胜一筹？

    Couchbase vs Redis，究竟哪个更胜一筹？

    Couchbase vs Redis，究竟哪个更胜一筹？

    全栈程序员-站长的头像 全栈程序员-站长
    2022年2月19日
    46
  • C语言指针函数和函数指针区别

    C语言指针函数和函数指针区别

    C语言指针函数和函数指针区别C语言函数指针和指针函数的区别C和C++中经常会用到指针，和数据项一样，函数也是有地址的，函数的地址是存储其机器语言代码的内存的开始地址。指针函数和函数指针经常会混淆，一个是返回指针的函数，另一个是指向函数的指针，下面就分别解释指针函数和函数指针的区别。一、指针函数指针函数是返回指针的函数主体是函数，返回值是一个指针基本声明形式：返回数据类型+*+函数名+(变量类型1,……

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月22日
    20

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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