zoukankan      html  css  js  c++  java
  • 高德地图——标记随着新的点击而切换位置

    要求:

    1.为地图任意设置一个中心点和地图显示级别 ,并在中心点添加一个标记。

    2.为鼠标设置一个小手状的样式 。

    3.为地图绑定点击事件 ,在点击的地方添加一个标记 ,同时要把之前的标记清除。

    ( 具体效果查看效果视频 )

    任务(步骤):

    1使用new AMap.Map()创建一个地图。

    2. 为地图任意设置一个中心点和地图显示级别,并使用AMap.Marker()方法在地图中心点添加一个标记

    3. 使用setDefaultCursor方法为鼠标设置一个小手状的样式

    4.为地图绑定点击事件 ,在点击的地方添加一个标记 ,同时要把之前的标记使用map.remove()方法清除。

    <!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>5-4添加标记练习</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                #container{
                    position: absolute;
                    top: 0;
                    left: 0;
                     100%;
                    height: 100%;
                }
            </style>
        </head>
        <body>
            <div id="container"></div>
            
            <script>
                var map = new AMap.Map('container',{
                    zoom:10,
                    center:[116.379391,39.861536]
                });
                
                map.setDefaultCursor('pointer');
                
                var marker = new AMap.Marker({
                    icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                    position:[116,39]
                })
                
                map.on('click',function(e){
                    map.remove([marker])
                    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)
                    });
                    
                    map.add([marker]);
                })
                
            </script>
        </body>
    </html>
  • 相关阅读:
    使用Flex Bison 和LLVM编写自己的编译器[zz]
    应用开发框架讨论应用配置wxFileConfig
    交流电220V是从何而来的
    电压、电流、电阻的概念
    电路返回端,接地,大地,等势体,静电场,回路,电能
    泛型实现List(List<T>)排序
    javascript注册功能
    层(div或table)的左右滚动
    javascript正则表达式检验
    JavaScript通用类库(ZT)
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11431603.html
Copyright © 2011-2022 走看看