1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 高德地图-定义标记 添加标记 删除标记 自定义标记图标

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

时间:2022-05-29 06:45:07

相关推荐

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

定义标记

var marker = new AMap.Marker({icon:'/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="/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:'/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:'/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="/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:'/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:'/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:'/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});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。