Google Maps API - 隐藏位置标记

时间:2014-03-04 14:43:40

标签: javascript google-maps google-maps-api-3

我是谷歌地图API的新手。到目前为止,我已经成功地将我的标记分层。但是当我选择要显示的多个图层时,我的一些标记会隐藏。即使我一直放大,我也无法查看它们。当我取消选中其中一个图层时,标记会返回。是否有一些代码可以添加来解决这个问题?

这是我迄今为止在Kissr网站上托管的内容:Version 1 - Maps

这是我在github上的最新代码:Github Code

这是我的html文件。

    <!DOCTYPE html>
    <html>
  <head>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDYLjSN23UIORWpyQ-09Qd6dz7M2KNydQk&sensor=false"></script>
    <script type="text/javascript" src="vars.js" ></script>
    <script>
        function initialize() {
            var MaristCollege = {
                center : schoolCenter,
                zoom : 16,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("googleMap"), MaristCollege);

            check();
        }

        function check() {
            if (document.getElementById('lan-rooms').checked) {
                lanRooms.setMap(map);
            } else {
                lanRooms.setMap(null);
            }
            if (document.getElementById('man-holes').checked) {
                manHoles.setMap(map);
            } else {
                manHoles.setMap(null);
            }
            if (document.getElementById('conduits-trail').checked){
                conduitPathMcD.setMap(map);
                conduitPathMrG.setMap(map);
            } else {
                conduitPathMcD.setMap(null);
                conduitPathMrG.setMap(null);
            }
        }


        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

<body>
    Layer Selection
    <label>
        <input type="checkbox" name="checkbox" id="lan-rooms" onclick="check()" value="value">
        Lan Rooms </label>

    <label>
        <input type="checkbox" name="checkbox" id="man-holes" onclick="check()" value="value">
        Man Holes </label>
    <label>
        <input type="checkbox" name="checkbox" id="conduits-trail" onclick="check()" value="value">
        Conduit Paths</label>
    <div id="googleMap" style="width:100%;height:850px;"></div>
</body>
</html>

这是我的JS文件中放入Fusiontables的代码。

//school coordinate
var schoolCenter = new google.maps.LatLng(41.722937, -73.936533);

var map;

 //lan room locations found in a fusion table
var lanRooms = new google.maps.FusionTablesLayer({
    query : {
        select : 'Location',
        from : '1Mn-40rJ6-r7gjFfnVCqy3AS6Xc9flaiowjQTFbk'
    },
    styles : [{
    markerOptions : {
            iconName : 'small_green'
        }
    }]
 });

//manhole location created in a fusion table
var manHoles = new google.maps.FusionTablesLayer({
query : {
    select : 'Location',
    from : '1EOtteMYME1OzNuF2pHT7KZqo1qKLWCWQian0RzM'
},

});

0 个答案:

没有答案