javascript - 谷歌地图 v3 : Unable to get value of the property 'setMap'-6ren

javascript - 谷歌地图 v3 : Unable to get value of the property 'setMap'

转载作者：行者123 更新时间：2023-12-02 19:17:39

我是 Google map 新手。我将 Google Maps v3 map 添加到 ASP.NET 4.0 项目的 aspx 文件中，并尝试为 map 上的四个 KML 图层添加切换复选框。

但是，当我单击该复选框时，出现此错误:“Microsoft JScript 运行时错误:无法获取属性“setMap”的值:对象为 null 或未定义”。谢谢!

这是 HTML:

<body onload="initialize()">    
        <div id="map-canvas" style="width:100%; height:90%;"></div>
        <div id="legend">
            <div class="column">
                <input type="checkbox" id="landmarksLayer" onclick="toggleKMLLayer(this,'Notable Locations');" checked="checked" />Notable Locations (<img alt="yellow dot" src="Images/GoogleMaps/yellow-dot.png" />)
            </div>
        </div>
    </body>

这是 JavaScript:

    <%--Javascript--%>
    <script type="text/JavaScript" src="http://maps.googleapis.com/maps/api/js?key=[I_Removed_My_Key]&sensor=false"></script>

    <script type="text/javascript">

        var infowindow = new google.maps.InfoWindow({ "maxWidth": 100 });

        var map;

        var landmarksLayer;
        var publicArtLayer;
        var blueEmergencyPhonesLayer;
        var buildingsLayer;

        //toggle
        function toggleKMLLayer(chkbox, kmlLayerID) {

            //window.alert(kmlLayerID);

            if (chkbox.checked) {
                //window.alert("checked");
                landmarksLayer.setMap(map);
            }
            else {
                //window.alert("unchecked");
                landmarksLayer.setMap(null);
            }
        }

        function initialize() {

            var mapOptions = {
                center: new google.maps.LatLng(33.585737, -101.884804),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            var kmlLayerOptions = {
                preserveViewport: true,
                suppressInfoWindows: true
            };

            var landmarksLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/landmarks.xml', kmlLayerOptions);
            landmarksLayer.setMap(map);

            var publicArtLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/art.xml', kmlLayerOptions);
            publicArtLayer.setMap(map);

            var blueEmergencyPhonesLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/emergency.xml', kmlLayerOptions);
            blueEmergencyPhonesLayer.setMap(map);

            var buildingsLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/bldgs.xml', kmlLayerOptions);
            buildingsLayer.setMap(map);


            addKmlClickHandler(landmarksLayer);
            addKmlClickHandler(publicArtLayer);
            addKmlClickHandler(blueEmergencyPhonesLayer);
            addKmlClickHandler(buildingsLayer);
        }

        // create a new info window for the KML (outage) layer and the geo-coded house marker
        function addKmlClickHandler(KmlLayer) {
            google.maps.event.addListener(KmlLayer, "click", function (event) {
                infowindow.close();
                infowindow.setOptions({
                    pixelOffset: event.pixelOffset,
                    content: event.featureData.infoWindowHtml,
                    position: event.latLng
                });
                infowindow.open(map);
            });
        }

    </script>

最佳答案

您正在为图层创建全局变量:

    var landmarksLayer;
    var publicArtLayer;
    var blueEmergencyPhonesLayer;
    var buildingsLayer;

但您没有使用它们(在初始化函数内):

    var landmarksLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/landmarks.xml', kmlLayerOptions);
    landmarksLayer.setMap(map);

    var publicArtLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/art.xml', kmlLayerOptions);
    publicArtLayer.setMap(map);

    var blueEmergencyPhonesLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/emergency.xml', kmlLayerOptions);
    blueEmergencyPhonesLayer.setMap(map);

    var buildingsLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/bldgs.xml', kmlLayerOptions);
    buildingsLayer.setMap(map);

变量前面的“var”创建了初始化函数本地变量的新版本，而全局版本未初始化。您需要初始化全局版本，以便可以在 HTML 点击监听器(在全局上下文中执行)中使用它。

关于javascript - 谷歌地图 v3 : Unable to get value of the property 'setMap' ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12940841/