добавили несколько слоев геойсона на Google Maps

Question

привет, у меня проблема с добавлением многократного слоя geojson и отображением его на одной карте

image1

image2

на изображении 1 я использую тип 'MultiLineString', а на изображении 2 я использую 'MultiPolygon' и хочу отобразить оба типа на одной карте.

я использую два разных источника

в данный момент мой код может отображать только один

 var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -2.9365327, lng: 104.4950964}
        });
        var infowindow = new google.maps.InfoWindow();

        map.data.loadGeoJson('<?= base_url(); ?>/asset/mapgeojson/newjson.geojson');

        var ced = google.maps.event.addListener(map.data, 'click', function(event) {
          var aab=event.feature.f;
          infowindow.setContent('<div class="col-md-12"><div class="row"><div class="col-md-12"><table class="table table-striped"><tr><th>ID</th><td>'+aab+'</td></tr><tr><th>Latitude</th><td>'+ event.latLng.lat()+'</td></tr><tr><th>Longitude</th><td>'+ event.latLng.lng()+'</td></tr></table></div></div><div class="row"><div class="col-md-12"><button type="button" class="btn btn-info col-md-12" data-toggle="modal" data-target="#myModal'+aab+'">Detail</button></div></div></div>');
          console.log(event.feature.f)
          infowindow.setPosition(event.latLng);
          infowindow.open(map);

        });

        map.data.addListener('mouseover', function (event) {
          map.data.revertStyle();
          map.data.overrideStyle(event.feature, {
            strokeColor: 'red',
            strokeWeight: 8

          });
        });

        map.data.addListener('mouseout', function (event) {
          map.data.revertStyle();
        });


      }

может быть, кто-то может мне помочь?

отредактировано: я нашел свой собственный ответ, поэтому яЗдесь я приведу результаты

, как вы можете видеть, я добавил несколько слоев геоджона из разных ссылок в одну.

Answer 1

карта вар;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {lat: -2.9365327, lng: 104.4950964}
    });
    var infowindow = new google.maps.InfoWindow();

var name_var= new google.maps.Data({map: map});
jalan.loadGeoJson('source_var');

var name_var2= new google.maps.Data({map: map});
air_bersih.loadGeoJson('source_var2');


    var ced = google.maps.event.addListener(map.data, 'click', function(event) {
      var aab=event.feature.f;
      infowindow.setContent('<div class="col-md-12"><div class="row"><div class="col-md-12"><table class="table table-striped"><tr><th>ID</th><td>'+aab+'</td></tr><tr><th>Latitude</th><td>'+ event.latLng.lat()+'</td></tr><tr><th>Longitude</th><td>'+ event.latLng.lng()+'</td></tr></table></div></div><div class="row"><div class="col-md-12"><button type="button" class="btn btn-info col-md-12" data-toggle="modal" data-target="#myModal'+aab+'">Detail</button></div></div></div>');
      console.log(event.feature.f)
      infowindow.setPosition(event.latLng);
      infowindow.open(map);

    });

    map.data.addListener('mouseover', function (event) {
      map.data.revertStyle();
      map.data.overrideStyle(event.feature, {
        strokeColor: 'red',
        strokeWeight: 8

      });
    });

    map.data.addListener('mouseout', function (event) {
      map.data.revertStyle();
    });


  }

Answer 2

потому что никто не ответил на мой вопрос, поэтому я нашел свои собственные ответы из разных источников.так просто объявите новый слой, и слой будет автоматически отображаться на той же карте

сначала объявите

var name_foo_first = new google.maps.Data({map: map});
var name_foo_two = new google.maps.Data({map: map});

и предоставьте ссылку на данные геоджонса, которую вы сохранили.

name_foo_first.loadGeoJson('url_foo_first.geojson');
name_foo_two.loadGeoJson('url_foo_two.geojson');