高德地图-定义标记、添加标记、删除标记、自定义标记图标

定义标记

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,-25) // 像素的偏差值
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Autocomplete"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
    	#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
</style>
    </head>
<body>
    <div id="container"></div> 

    <script type="text/javascript">
		var map = new AMap.Map('container',{
            zoom:19, //初始的地图级别
            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){
            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,-25) // 像素的偏差值
            });
            marker.setMap(map);
        })
    </script> 
</body>
</html>

添加标记（2种）
marker.setMap(map);
map.add([marker])
删除标记（2种）
marker.setMap(null);
map.remove([marker]);//前提是用add添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Autocomplete"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
    	#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
        .amap-icon img{
            width: 25px;height: 34px;
        }
</style>
    </head>
<body>
    <div id="container"></div> 

    <script type="text/javascript">
		var map = new AMap.Map('container',{
            zoom:19, //初始的地图级别
            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) // 像素的偏差值
        });
        var marker2 = new AMap.Marker({
            icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //标记的图标
            position:[116.379391,39.0],//标记的坐标
            // offset:new AMap.Pixel(-50,-500) // 像素的偏差值
        });
        // marker.setMap(map);
        map.add([marker,marker2]);

        //第二种删除方法
        setTimeout(function(){
            map.remove([marker,marker2]);
        },3000);


        //第一种删除方法：5秒后删除标记
        // setTimeout(function(){
        //     marker.setMap(null);
        // },5000);

        // map.on('click',function(e){
        //     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,-25) // 像素的偏差值
        //     });
        //     marker.setMap(map);
        // })
	</script>   
</body>
</html>

自定义标记图标

var mk1 = new AMap.Icon({
    size:new AMap.Size(500,500), //图标大小
    image:'./1.jpg', //图片地址
    imageSize:new AMap.Size(100,100) //最终在map里面显示的大小
//  imageOffset:new AMap.Pixel(-50,-50) //裁剪 偏差值
});

var marker = new AMap.Marker({
    position:[116.379391,39.861536],
    icon:mk1
});

saiyi绒小花

发布了40 篇原创文章 · 获赞 0 · 访问量 762

私信关注

高德地图-定义标记、添加标记、删除标记、自定义标记图标

猜你喜欢