Question

如果之前有人问这个问题，我很抱歉，但我找不到了。

所以我有一个googlemap，带有一个简单的复选框，可以打开和关闭标记显示。此复选框位于“map-canvas”div之外。

这一切都很好，但是，我的问题如下。当我的页面加载时，标记不会显示，因此，不会选中该复选框。

我遇到的问题是，当缩放级别足够大（> 4）时，我正在尝试自动显示标记。这项工作也很好，当用户放大过去4级时，我的标记会自动打开。但是，当发生这种情况时，我还需要自动选中Marker复选框，而且我没有运气。无论我如何尝试在js中引用checkbox对象，它只会变为'null'。

</script>
<div id="panel">
    Display : <asp:CheckBox ID="CheckBoxHeatMap" runat="server" checked="true" OnClick="javascript:return toggleHeatmap();" /> Heatmap
    <asp:CheckBox ID="CheckBoxMarkers" runat="server" checked="false" OnClick="javascript:return toggleMarkers();"/> Markers
</div>
<div id="map-canvas" style="height: 500px"></div>

<script type="text/javascript">

var map, heatmap, previousZoomLevel = 2;
var markersList = new Array();
var LatlngList = new Array();
var MarkersOn = false;

window.onload = function() {
    var mapOptions = {
        // center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        center: new google.maps.LatLng("0.0", "0.0"),

        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            title: data.title
        });
        LatlngList.push(myLatlng);
        markersList.push(marker);
        (function(marker, data) {
            google.maps.event.addListener(marker, "click", function(e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: LatlngList,
        radius: 20
     });
     heatmap.setMap(map);


    google.maps.event.addListener(map, 'zoom_changed', function() {
        var zoomLevel = map.getZoom();
        if (zoomLevel > 4 && previousZoomLevel <= 4 && MarkersOn == false) {

            toggleMarkers();
        };
        previousZoomLevel = zoomLevel
    });

}

    function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
        if (CheckBoxHeatMap.checked == true) {
            CheckBoxHeatMap.checked == false;
        }
        else {
            CheckBoxHeatMap.checked == true;
        };



        return false;
    }

    function toggleMarkers() {
        for (i = 0; i < markers.length; i++) {
            if (MarkersOn == true) {
                markersList[i].setMap(null);
            }
            else {
                markersList[i].setMap(map);
            };
        };

        if (MarkersOn == true) {
            MarkersOn = false;
            document.getElementById("CheckBoxMarkers").checked = false;
        }
        else {
            MarkersOn = true;
            document.getElementById("CheckBoxMarkers").checked = true;
        };

        return false;
    }

</script>

具体的document.getElementById（“CheckBoxMarkers”）在从zoom_changed事件调用toggleMarkers时为null。

我怎样才能超越这个？

从Google地图事件更新map-canvas div之外的对象

0 个答案: