在 Google Maps API v3 中独立与超过 1 个 GeoJson 文件交互答案

【问题标题】：Independently interact with more than 1 GeoJson file in Google Maps API v3在 Google Maps API v3 中独立与超过 1 个 GeoJson 文件交互
【发布时间】：2016-07-18 19:56:09
【问题描述】：

我想将多个 GeoJSON 文件加载到 Google 地图并独立设置每个文件的样式。我发现了以下问题，但无法使解决方案起作用。 interact with geojson layers independently in google maps api v3

  function initMap() {

    //Initialize 2 varibles that will take GeoJson files and Load the GeoJson files for each layer
    var alt1row = new google.maps.Data();
    alt1row.loadGeoJson('https://45d0ae3907069179bbd918ae873676bebbe0427a.googledrive.com/host/0B8EzS0XcloQzRFdPeWFIUGVLZlk/ALT_1_ROW.geojson')

    var alt2row = new google.maps.Data();
    alt2row.loadGeoJson('https://45d0ae3907069179bbd918ae873676bebbe0427a.googledrive.com/host/0B8EzS0XcloQzRFdPeWFIUGVLZlk/ALT_2_ROW.geojson');


    //Set the style for each layer
    alt1row.setStyle({
        strokeColor: 'red',
        strokeWeight: .5
    });

    alt2row.setStyle({
        strokeColor: 'blue',
        strokeWeight: .5
    });

    //Set the layers to the map
    alt1row.setMap(map);
    alt2row.setMap(map);

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 35.333851, lng: -77.555105},
      zoom: 10
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&libraries=drawing&callback=initMap"
async defer></script>

【问题讨论】：

您对linked question 中发布的解决方案有什么问题（为什么不是重复的）？
正如您所说，“我发现了以下问题，但无法使解决方案发挥作用”。您是否遇到任何错误消息？请阐述你的陈述并讨论你的问题。同时，您可以查看文档how to load GeoJSON
我没有收到任何错误消息。谷歌地图显示，但我的 GeoJson 文件中的数据没有在地图上绘制。我对 JS 很陌生，这可能是问题所在。
我能够让一切正常工作。不知道发生了什么，但我从头开始重新启动，一切正常。

标签： google-maps-api-3 geojson

【解决方案1】：

我曾解决过同样的问题（我必须为多边形着色不同的颜色）。我通过更新我的 geojson 文件，将颜色属性添加到我的文件中解决了这个问题。我认为代码会更清晰：

GeoJSon 文件：

     {"type":"Feature","properties":{
     "color":"red"},"geometry":{"type": "MultiPolygon","coordinates":[[[[....]]]]
     {"type":"Feature","properties":{"color":"red"},"geometry"
     :{"type": "MultiPolygon","coordinates":[[[[ ....

我的页面html：

     var countries = ['germany','moldova','italy','spain','france'];


    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.TERRAIN ,
      styles: styles
    });  

    for (var country in countries){
        map.data.loadGeoJson('http://grp-map.equant.com/GoogleMaps/'+countries[country]+'.geojson');
    }
    map.data.setStyle(function(feature) {

        var k = feature.getProperty('color');
        return {
            fillColor:k,
            strokeWeight:1,
            clickable: false
        }
    });

希望对你有帮助。

【讨论】：