該篇文章兩個知識點:
1.每次點擊把手動添加的覆蓋物存到自定義的數組,清除時再調用map.remove(傳參),並把數組置空;
2.想自定義覆蓋物樣式:只需在callBackFn函數裏,再添加content參數,裏面可以添加我們自定義的標籤名和樣式,這樣就算你想在裏面畫花都行了;
效果圖:
dome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,
minimal-ui"/>
<title></title>
<style>
html,body{width:100%;height:100%;}
#map{width:100%;height:100%;background: #ddd;}
#clear{position: fixed;bottom:5%;right:5%;padding:8px;color:#fff;font-size: 12px;background: #0792dd;}
.markerClass{background: url(local1.png);background-size: 100% 100%;width:52px;height:61px;}
</style>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.2&key=你在高德申請的key&plugin=AMap.ToolBar'></script>
</head>
<body>
<div id="map"></div>
<span id="clear">點擊清除覆蓋物</span>
</body>
<script>
/*========設置中心點=======*/
var _lng = "113.2641077042";
var _lat = "23.1254620342";
var map = new AMap.Map('map', {
zoom: 15,
center: [_lng, _lat]
});
/*========設顯示中心標註=======*/
var xbjMarker = new AMap.Marker({
position: [_lng, _lat]
});
xbjMarker.setMap(map);
xbjMarker.setLabel({
offset: new AMap.Pixel(-24, -26),
content: "地址展示框"
});
var addMarkers = [];
//添加覆蓋物
var callBackFn = function(e) {
var marker = new AMap.Marker({
map: map,
position: [e.lnglat.getLng(), e.lnglat.getLat()],
content:'<div class="markerClass"></div>'//自定義覆蓋物樣式,可傳可不傳
});
addMarkers.push(marker);
};
//點擊地圖添加自定義覆蓋物
map.on('click', callBackFn);
//點擊清除按鈕
document.getElementById("clear").addEventListener('click',function(){
map.remove(addMarkers);
addMarkers = [];
});
</script>
</html>