拿高德地图的来说吧,百度地图类似,代码大概如下:
<script type="text/javascript">
function addTrafficLayer() {
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10,
opacity:1,
autoRefresh:true
});
map.add(trafficLayer);
}
function removeTrafficLayer() {
map.remove(trafficLayer);
}
</script>
<body>
<div id="allmap"></div>
<button onclick="addTrafficLayer()">添加路况信息</button>
<button onclick="removeTrafficLayer()">移除路况信息</button>
</body>
看起来没啥毛病,只要点击一次添加路况信息再接着点击移除路况信息是没有毛病的。但是如果连续点击两次或多次添加路况信息后,再点击移除路况会发现移除不掉。
细细一看就会发现其实每次点击添加路况按钮都会新创建路况图层,而最后移除的时候只是把最后一次创建的图层移除了,所以看起来是不起作用的。解决方法就是在添加图层前,先判断是否已经创建过了。
var trafficLayer;
function addTrafficLayer() {
if(trafficLayer==undefined){
trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10,
opacity:1,
autoRefresh:true
});
}
map.add(trafficLayer);
}