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>
  • 相关阅读:
    Qt串口的使用记录
    CImage灰度化
    (记录)MSYS2+MINGW32编译ffmpeg过程
    Blas 基本函数功能
    blas中dgemm_的用法
    选择、插入、冒泡排序
    简单的页面
    中国大学排名
    爬bing 主页
    读书报告
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11431157.html
Copyright © 2011-2022 走看看