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();
        });


      }

也许有人可以帮助我吗？

编辑：我找到了自己的答案，所以我将在这里给出结果

如您所见，我从不同的链接中添加了几层geojson到一个。

Answer 1

因为没有人回答我的问题，所以我从各种参考文献中找到了自己的答案。如此简单，只需声明新图层，图层将自动显示在同一张地图中

先声明

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

并提供您保存的geojson数据链接。

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

Answer 2

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();

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();
    });


  }

在Google地图上添加了几层geojson

2 个答案: