高德地图和百度地图接口封装遇到的问题(一):重复添加实时路况图层后无法移除

拿高德地图的来说吧,百度地图类似,代码大概如下:

<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);
        }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值