Вопрос по google-maps-api-3, javascript – Как включить / выключить слой, используя Google Maps API v3 и Fusion Tables?

3

Я пытаюсь сделать карту с несколькими слоями таблицы слияния. Каждый слой таблицы слияния будет показывать количество убийств, связанных с картелями, в конкретный год (включая сумму всех лет). Поскольку каждый слой имеет одинаковую геометрию, я должен позволить пользователю просматривать один слой за раз. Есть ли способ включить / выключить каждый слой с помощью переключателя? Я искал учебные пособия или примеры в течение нескольких часов и оказался пустым, поэтому я надеюсь, что кто-то здесь может помочь.

Вот ссылка на копию карты:https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

Вот код (извините за форматирование)

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>
<link rel='stylesheet' href='stylesheet.css' />
<script type="text/javascript" src="script.js"></script>


<script type='text/javascript'>

window.onload = function () {

    var oceanStyle = [
        {
         featureType: "ocean",
         stylers: [
            { saturation: -100 }
            ]
        },
        {
         featureType: "all",
         elementType: "labels",
         stylers: [
         { visibility: "off"}
         ]
         }

    ];

    var oceanMapType = new google.maps.StyledMapType(oceanStyle, 
        {name: "Grayscale"});


    var myLatlng = new google.maps.LatLng(0,0);

    var mapOptions = {
        center: new google.maps.LatLng(24,-103),
        zoom: 5,
        //mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {                
            position: google.maps.ControlPosition.RIGHT_TOP,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
            },

        panControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL

        }
        };                  

    var map = new google.maps.Map(document.getElementById("mymap"), mapOptions);

    map.mapTypes.set('Grayscale',oceanMapType);
    map.setMapTypeId('Grayscale');

    var layer1 = new google.maps.FusionTablesLayer({
        query:{
            select: 'unique_id',
            from: '3943497'
        },
        map: map

    });

        /*
    var layer2 = new google.maps.FusionTablesLayer({

        query:{
            select: 'unique_id',
            from: '3962564'         
        },
        map: map

    }); */



    }


</script>
</head>
<body>
  <div id='mymap'></div>    

#

РЕДАКТИРОВАТЬ

#

Ладно, я понял! Вот мой код на тот случай, если у других возникнет тот же вопрос:

<html>

<head>

<!-- <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> -->

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>

<link rel='stylesheet' href='stylesheet.css' />

var map;

//var layArray = [];

var shownLayer;

var layer_sum;

var layer_2007;

var layer_2008;

var layer_2009;

var layer_2010;



function toggleLayer(this_layer){

    shownLayer.setMap(null);

    this_layer.setMap(map);

    shownLayer = this_layer;

    /*if ( this_layer.getMap() ) {

        this_layer.setMap(null);

    }else{

        this_layer.setMap(map);

    }*/ 

}



 window.onload = function () {



    var oceanStyle = [

        {

         featureType: "ocean",

         stylers: [

            { saturation: -100 }

            ]

        },

        {

         featureType: "all",

         elementType: "labels",

         stylers: [

         { visibility: "off"}

         ]

         }



    ];



    var oceanMapType = new google.maps.StyledMapType(oceanStyle, 

        {name: "Grayscale"});





    var myLatlng = new google.maps.LatLng(0,0);



    var mapOptions = {

        center: new google.maps.LatLng(24,-103),

        zoom: 6,

        //mapTypeId: google.maps.MapTypeId.HYBRID,

        mapTypeControl: true,

        mapTypeControlOptions: {                

            position: google.maps.ControlPosition.RIGHT_TOP,

            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']

            },



        panControl: true,

        streetViewControl: false,

        zoomControl: true,

        zoomControlOptions: {

            style: google.maps.ZoomControlStyle.SMALL



        }

        };                  



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



    map.mapTypes.set('Grayscale',oceanMapType);

    map.setMapTypeId('Grayscale');





    layer_sum = new google.maps.FusionTablesLayer({

        query:{

            select: 'unique_id',

            from: '3943497'

        },      



    }); 





    layer_2007 = new google.maps.FusionTablesLayer({



        query:{

            select: 'unique_id',

            from: '3962564'         

        },          



    }); 



    layer_2008 = new google.maps.FusionTablesLayer({



        query:{

            select: '2008',

            from: '3962469'

        },



    });



    layer_2009 = new google.maps.FusionTablesLayer({



        query: {

            select: '2009',

            from: '3964318'             

        },

    });



    layer_2010 = new google.maps.FusionTablesLayer({



        query: {

            select: '2010',

            from: '3964517'

        },

    });



    layer_sum.setMap(map);

    shownLayer = layer_sum;





    }





</script>

</head>

<body>    

  <div id='mymap'></div>    

  <div id='map-optionbar-r'>        

    Sum of Homicides<input name="layers" type="radio" value="layer_sum" onClick="toggleLayer(layer_sum);" checked><br />

    Homicides - 2007<input name="layers" type="radio" value="layer_2007" onClick="toggleLayer(layer_2007);"><br />

    Homicides - 2008<input name="layers" type="radio" value="layer_2008" onClick="toggleLayer(layer_2008);"><br />

    Homicides - 2009<input name="layers" type="radio" value="layer_2009" onClick="toggleLayer(layer_2009);"><br />

    Homicides - 2010<input name="layers" type="radio" value="layer_2010" onClick="toggleLayer(layer_2010);"><br />

  </div> 

Ваш Ответ

2   ответа
0

УвидетьВключение / выключение слоя погоды в сочетании с другими настройками ; Я сделал это (с супер помощью Шона) для слоев погоды / облачности. Я полагаю, вы можете включить / выключить все остальные слои таким же образом, потому что у меня также активен FT-слой. Просто скопируйте мой код и настройте его. Ура! Фрэнк

Это правильная прямая глубокая ссылка - & gt;strahlen.org/map/map.htm ; развлекайтесь;)
Фрэнк, спасибо. Является ли ссылка на этой странице правильной ссылкой? Вы сказали, что есть слой погоды / облачности, но 2 ссылки мертвы, а та, что внизу, кажется более культурной картой, чем карта погоды / облаков. Можете ли вы подтвердить, что это правильная карта? csterling
6

toggleLayer(layer1);
// make sure your map is a global
function toggleLayer(this_layer)
{
   if( this_layer.getMap() ){
        this_layer.setMap(null);
   }else{
        this_layer.setMap(map);
   }
}
</head>
<body>
<br />
Layer 1<input name="layers" type="radio" value="layer1" onClick="toggleLayer(layer1);"><br />
Layer 2<input name="layers" type="radio" value="layer2" onClick="toggleLayer(layer2);"><br />

UPDATED

   <script type='text/javascript'>
    var map, layer1, layer2;
  google.maps", "3", {other_params:"sensor=false"});
 window.onload = function () {

    var oceanStyle = [
        {
         featureType: "ocean",
         stylers: [
            { saturation: -100 }
            ]
        },
        {
         featureType: "all",
         elementType: "labels",
         stylers: [
         { visibility: "off"}
         ]
         }

    ];

    var oceanMapType = new google.maps.StyledMapType(oceanStyle, 
        {name: "Grayscale"});


    var myLatlng = new google.maps.LatLng(0,0);

    var mapOptions = {
        center: new google.maps.LatLng(24,-103),
        zoom: 5,
        //mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {                
            position: google.maps.ControlPosition.RIGHT_TOP,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
            },

        panControl: false,
        streetViewControl: false,
        zoomControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL

        }
    };                  

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

    map.mapTypes.set('Grayscale',oceanMapType);
    map.setMapTypeId('Grayscale');


    layer1 = new google.maps.FusionTablesLayer({
        query:{
            select: 'unique_id',
            from: '3943497'
        },
        //map: map

    }); 


    layer2 = new google.maps.FusionTablesLayer({

        query:{
            select: 'unique_id',
            from: '3962564'         
        }
        //map: map

    }); 

    // may need to remove this line
    //layer1.setMap(map);

    }

    function old_toggleLayer(this_layer){
        if ( this_layer.getMap() ) {
            this_layer.setMap(null);
        }else{
            this_layer.setMap(map);
        }

    }

    function toggleLayer(this_layer){
        layer1.setMap(null);
        layer2.setMap(null);
        this_layer.setMap(map);

    }



</script>
Спасибо, что приняли мой ответ. Ваша карта, а layer1 и layer2 должны быть глобальными. Плюс функция toggleMap () должна находиться за пределами вашей функции onload (). Наконец, я изменил toggleMap (), чтобы сначала отключить оба слоя, так как это похоже на ваше намерение.
Эрик - Спасибо! Это выглядит великолепно, но я реализовал этот код, и он все еще не работает. Можете посмотреть и посмотреть, что я сделал не так? Моя карта не является глобальной переменной? Это все, о чем я могу думать ... если только у меня нет какой-то другой ошибки, о которой я не подозреваю. Я все еще изучаю основы javascript, поэтому я не удивлюсь, если упущу что-то очевидное для опытного ветеринара JS. Вот моя карта в ее нынешнем виде:mywebspace.wisc.edu/csterling/web/cartel%20map/index.html csterling

Похожие вопросы