zoukankan      html  css  js  c++  java
  • 高德地图——多点标记

    <!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;
                }
            </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(-25,-50)
                    });
                    marker.setMap(map);
                })
                
            </script>
        </body>
    </html>
  • 相关阅读:
    WannaCry蠕虫分析与预防
    对网络传输的理解
    RESTful API 设计最佳实践
    码农们的密码
    腾讯云公网负载均衡技术实现详解
    ELK统一日志系统的应用
    ElasticSearch + Canal 开发千万级的实时搜索系统
    聊架构:5分钟了解REST架构
    Netty5 HTTP协议栈浅析与实践
    这里,彻底了解HTTPS
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11431157.html
Copyright © 2011-2022 走看看