API Google Map слоя слоя не работает - PullRequest
Новая
       9

API Google Map слоя слоя не работает

0 голосов
/ 05 июня 2018

Я пытаюсь написать код с помощью API карт Google, чтобы создать карту, которая может переключать слой из таблицы слияния.Я уже исследовал этот сайт и перепробовал много кодов, но он все еще не работает.Я не могу переключить слой, и я не знаю почему.Я получил много сообщений об ошибках, таких как getMap undefined.Я вижу много рабочих примеров, но мой собственный код не работает.

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>
<script>
  // var layer1 = null;
  // var layer2 = null;
  // var layer3 = null;
  // var map = null;

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 13.809, lng: 100.504},
      zoom: 7,
      gestureHandling: 'cooperative'
    });

    var layer1 = new google.maps.FusionTablesLayer({
      query: {
      select: '*',
      from: '1ps-56Oh_BU9ROLblH5pnRIwur0NwCj1CZZDcJfiv'
    },
    styles: [{
      polygonOptions: {
      fillColor: '#00FF00',
      fillOpacity: 0.3
      }
    }]
    });

    var layer2 = new google.maps.FusionTablesLayer({
      query: {
      select: '*',
      from: '1ZRJhrDJvOKY03txK1KOap725DCnvKcb-E1HSXFRz'
    },
    styles: [{
      polygonOptions: {
      fillColor: '#ff000',
      fillOpacity: 0.3
      }
    }]
    });

    var layer3 = new google.maps.FusionTablesLayer({
      query: {
      select: '*',
      from: '1nTTiRj1FDh-zuvtSuRWSWYbVU_izfkOB2ulN1MFM'
    },
    styles: [{
      polygonOptions: {
      fillColor: '#0000ff',
      fillOpacity: 0.3
      }
    }]
    });
  }

function toggleLayer(this_layer){
  if (this_layer.getMap()) {
      this_layer.setMap(null);
    } else {
      this_layer.setMap(map);
    }  
  }
</script>

Это HTML: 

<body>
<div id="map"></div>
<section>
  <div>
    <h1>select layer</h1>
  </div>
  <div>
    <h2>xxxxxxx</h2>
    <input type="checkbox" name="show_hide_layer1" onchange="toggleLayer(layer1)"/>
    <label>province</label>
    <input type="checkbox" name="show_hide_layer2" onchange="toggleLayer(layer2)"/>
    <label>amphoe</label>
    <input type="checkbox" name="show_hide_layer3" onchange="toggleLayer(layer3)"/>
    <label>tambon</label>
  </div>
 </section>

1 Ответ

0 голосов
/ 05 июня 2018

Вы закомментировали глобальные переменные, необходимые для работы кода.Измените это; 

// var layer1 = null;
// var layer2 = null;
// var layer3 = null;
// var map = null;

На: 

var layer1 = null;
var layer2 = null;
var layer3 = null;
var map = null;

И удалите var перед строками, которые определяют те, в функции initMap.

подтверждение концепции скрипки 

html,
body,
#map {
  height: 90%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map"></div>
<section>
  <div>
    <h1>select layer</h1>
  </div>
  <div>
    <h2>xxxxxxx</h2>
    <input type="checkbox" name="show_hide_layer1" onchange="toggleLayer(layer1)" />
    <label>province</label>
    <input type="checkbox" name="show_hide_layer2" onchange="toggleLayer(layer2)" />
    <label>amphoe</label>
    <input type="checkbox" name="show_hide_layer3" onchange="toggleLayer(layer3)" />
    <label>tambon</label>
  </div>
</section>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<script>
  var layer1 = null;
  var layer2 = null;
  var layer3 = null;
  var map = null;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 13.809,
        lng: 100.504
      },
      zoom: 7,
      gestureHandling: 'cooperative'
    });

    layer1 = new google.maps.FusionTablesLayer({
      query: {
        select: '*',
        from: '1ps-56Oh_BU9ROLblH5pnRIwur0NwCj1CZZDcJfiv'
      },
      styles: [{
        polygonOptions: {
          fillColor: '#00FF00',
          fillOpacity: 0.3
        }
      }]
    });

    layer2 = new google.maps.FusionTablesLayer({
      query: {
        select: '*',
        from: '1ZRJhrDJvOKY03txK1KOap725DCnvKcb-E1HSXFRz'
      },
      styles: [{
        polygonOptions: {
          fillColor: '#ff000',
          fillOpacity: 0.3
        }
      }]
    });

    layer3 = new google.maps.FusionTablesLayer({
      query: {
        select: '*',
        from: '1nTTiRj1FDh-zuvtSuRWSWYbVU_izfkOB2ulN1MFM'
      },
      styles: [{
        polygonOptions: {
          fillColor: '#0000ff',
          fillOpacity: 0.3
        }
      }]
    });
  }

  function toggleLayer(this_layer) {
    if (this_layer.getMap()) {
      this_layer.setMap(null);
    } else {
      this_layer.setMap(map);
    }
  }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...