Question

单击复选框时，是否可能在谷歌地图上同时显示标记和融合图层？

这是我到目前为止，但是当我点击复选框时它没有显示任何内容。它仅在我将var marker和var layer置于initMap()函数内时显示。但是当我想要实现一个复选框时

function initMap() {
    var myLatLng = {lat: 38.5816, lng: -121.4944};

    return new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
          center: myLatLng
    });
}

var map = initMap();


$(document).ready(function () {
    // If city is clicked
    $(".city-marker").click(function () {

        if(this.checked == true) {
            var marker = new google.maps.Marker({
                position: {lat: 38.5816, lng: -121.4944},
                map: map
            });
         }
    })

    // If county is clicked
    $(".county-border").click(function () {
         if(this.checked == true) {
               var layer = new google.maps.FusionTablesLayer({
                   query: {
                            select: '05000US06001',
                            from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA',
                            where: "'County Name' = 'San Francisco'"
                          }
               });
              layer.setMap(map);
          }
     })
})

https://jsfiddle.net/tuyenle/j2rc2zvu/2/

Answer 1

您的代码存在的问题是，您要在此行上异步加载Google地图（请注意async和defer标记）：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=...&callback=initMap">
</script>

因此，只有在加载后，您才能创建地图并添加标记/融合图层。当它被加载时，它将调用initMap函数（注意链接中的callback=initMap）所以当添加标记时，你应该检查地图对象是否存在，可能的解决方案之一可能是这样的：

var map = null;
function initMap() { //is called when google maps api is loaded
    var myLatLng = {lat: 38.5816, lng: -121.4944};

    map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
          center: myLatLng
    });
}

$(document).ready(function () {
    // If city is clicked
    $(".city-marker").click(function () {
        if(map == null){ //at this point the Google maps api is still not loaded, you can maybe display a loading bar or disable the checkboxes unit it is. Anyway, this will almost never happen if user is not on very very slow internet connection.
            console.log("Google maps not loaded yet"); 
            return;
        }
        if(this.checked == true) {
            var marker = new google.maps.Marker({
                position: {lat: 38.5816, lng: -121.4944},
                map: map
            });
         }
    });

    // If county is clicked
    $(".county-border").click(function () {
         if(map == null){
            console.log("Google maps not loaded yet"); 
            return;
        }
        if(this.checked == true) {
               var layer = new google.maps.FusionTablesLayer({
                   query: {
                            select: '05000US06001',
                            from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA',
                            where: "'County Name' = 'San Francisco'"
                          }
               });
              layer.setMap(map);
          }
     })
});

谷歌地图API显示标记和融合层都在一起

1 个答案: