zoukankan      html  css  js  c++  java
  • 高德地图——添加标记的两种方法&删除地标记的两种方法

    添加标记:

    1、marker.setMap(map);

    2、marker.add([marker]);

     删除标记:

    1.marker.setMap(null);
    2 map.remove([marker1,marker2]);(前提是map用add添加的标记)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
            <title>添加标记-多点标记</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                    list-style: none;
                }
                #container{
                    position: absolute;
                    top: 0;
                    left: 0;
                     100%;
                    height: 100%;
                }
                #searchNode{
                    position: absolute;
                    z-index: 9;
                     300px;
                    height: 100px;
                    background: white;
                    text-align: center;
                    padding-top: 20px;
                }
                #setCenterNode{
                    position: absolute;
                    z-index: 9;
                     300px;
                    background: white;
                    top: 100px;
                }
                .amap-icon img{
                     25px;
                    height: 34px;
                }
            </style>
        </head>
        <body>
            <div id="container"></div>
            
            <script>
                var map = new AMap.Map('container',{
                    zoom:10,
                    center:[116.379391,39.861536]
                });
                
                var marker = new AMap.Marker({
                    icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',  //标记的图标
                    position:[116.379391,39.861536],  //标记的坐标
                    offset:new AMap.Pixel(-50,-500)  //像素的偏差值
                });
                marker.setMap(map);
                
                map.on('click',function(e){
                    //console.log(e.lnglat);
                    var marker = new AMap.Marker({
                        icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                        position:[e.lnglat.lng,e.lnglat.lat],
                        offset:new AMap.Pixel(-10,-20)
                    });
                    //marker.setMap(map);
                    /* setTimeout(function(){
                        marker.setMap(null);
                    },5000); */
                    
                    map.add([marker]);
                    setTimeout(function(){
                        map.remove([marker]);
                    },5000);
                })
                
            </script>
        </body>
    </html>
  • 相关阅读:
    AutoCAD VBA 批量导出源代码
    cad.net 启动时候利用.arg配置文件
    c#datatable序列化xml
    阿里云ECS自建K8S集群
    禁止git提交时执行 npm run -s precommit
    级数法求圆周率
    适合小学生表演的节目--持续更新
    编程闯关游戏--太空罚款
    Dynamics CRM Fetch查询超过5000条数据
    关于升级至12cR2版本的Optimizer 自适应特性的设置建议
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11431401.html
Copyright © 2011-2022 走看看