关于HTML下拉更改清除地图KML层的问题

Question

请你看看this jsfiddle，让我知道如何处理这样的情况，我必须通过.change()

添加新的KML之前清理映射现有的KML

以下是我的代码：

var map;
var kmlLayer;
$(document).ready(function () {
    var latlng = new google.maps.LatLng(49.241943, -122.889318);
    var myOptions = {
        zoom: 10,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    $('.form-control').on('change', function () {
        kmlLayer.setMap(null);
        var kmlUrl = 'http://startuphomes.ca/kml/' + $(this).val() + '.kml';
        var kmlOptions = {
            suppressInfoWindows: true,
            preserveViewport: false,
            map: map
        };
        kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

    });
});

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding-top:25px;
}
#map_canvas {
    width: 100%;
    height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
    <div class="well">
        <div id="map_canvas"></div>
    </div>
</div>
<select class="form-control">
    <option>Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

正如您所看到的，我尝试使用kmlLayer.setMap(null);，因为实际的kmlLayer尚未实例化

Answer 1

检查kmlLayer是否存在并且在调用setMap之前使用setMap方法。

if (kmlLayer && kmlLayer.setMap) kmlLayer.setMap(null);

代码段

var map;
var kmlLayer;
$(document).ready(function () {
    var latlng = new google.maps.LatLng(49.241943, -122.889318);
    var myOptions = {
        zoom: 10,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    $('.form-control').on('change', function () {
        if (kmlLayer && kmlLayer.setMap) kmlLayer.setMap(null);
        var kmlUrl = 'http://startuphomes.ca/kml/' + $(this).val() + '.kml';
        var kmlOptions = {
            suppressInfoWindows: true,
            preserveViewport: false,
            map: map
        };
        kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

    });
});

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding-top:25px;
}
#map_canvas {
    width: 100%;
    height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
    <div class="well">
        <div id="map_canvas"></div>
    </div>
</div>
<select class="form-control">
    <option>Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>