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

最新推荐文章于 2023-05-09 15:10:40 发布

wml00000

最新推荐文章于 2023-05-09 15:10:40 发布

阅读量1.8k

点赞数 2

分类专栏：地图接口封装问题文章标签：高德地图百度地图路况图层图层无法移除

本文链接：https://blog.csdn.net/wml00000/article/details/81774032

版权

地图接口封装问题专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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

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