javascript - 更改谷歌地图API 3中不同map.data.loadGeoJson数据集的标记

Question

我有两个不同的 geojson 数据集，我希望将其中一个数据集的标记设置为一个自定义图标，将另一个数据集设置为另一个自定义图标。

我该如何去做呢？

这是到目前为止我的代码。

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map2'), {
        zoom: 6,
        center: {lat: 53.939480, lng: -116.847401},
        mapTypeControlOptions: {
          mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                  'styled_map']
        }
    });


    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map'); //geo json

    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    // Load the associated GeoJSON
    var url = 'https://north-river.s3.us-east-2.amazonaws.com/Active.geojson';
    var url2 ='https://north-river.s3.us-east-2.amazonaws.com/Pipelines.geojson'
    map.data.loadGeoJson(url);
    map.data.loadGeoJson(url2);

  // Set event listener for each feature.
  map.data.addListener('click', function(event) {
     infowindow.setContent(
       "<table>"+
       "<tbody>"+"<th>Name:</th>" + "<td>" + event.feature.getProperty('Name') + "</td>" + "</tbody>" +
       "<tbody>"+"<th>Status:</th>" + "<td>" + event.feature.getProperty('Status') + "</td>" + "</tbody>" +
       "<tbody>"+"<th>Lat_DMS:</th>" + "<td>" + event.feature.getProperty('Lat_DMS') + "</td>" + "</tbody>" 


       );
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

使用单独的Data每个文件的图层，每个图层都有适合该图层的样式函数:

  // Load the associated GeoJSON
  var url = 'https://north-river.s3.us-east-2.amazonaws.com/Active.geojson';
  var url2 = 'https://north-river.s3.us-east-2.amazonaws.com/Pipelines.geojson'

  var layer1 = new google.maps.Data();
  layer1.loadGeoJson(url);
  layer1.setStyle(function(feature) {
    return /** @type {!google.maps.Data.StyleOptions} */({
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"});
  });
  layer1.setMap(map);
  var layer2 = new google.maps.Data();
  layer2.loadGeoJson(url2);
  layer2.setStyle(function(feature) {
    return /** @type {!google.maps.Data.StyleOptions} */({
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"});
  });
  layer2.setMap(map);

proof of concept fiddle

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementById('map2'), {
    zoom: 6,
    center: {
      lat: 57.64206,
      lng: -122.494374
    },
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
        'styled_map'
      ]
    }
  });
  google.maps.event.addListener(map, 'center_changed', function() {
    console.log(map.getCenter().toUrlValue(6));
  });

  //  map.mapTypes.set('styled_map', styledMapType);
  //  map.setMapTypeId('styled_map'); //geo json

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Load the associated GeoJSON
  var url = 'https://north-river.s3.us-east-2.amazonaws.com/Active.geojson';
  var url2 = 'https://north-river.s3.us-east-2.amazonaws.com/Pipelines.geojson'
  var layer1 = new google.maps.Data();
  layer1.loadGeoJson(url);
  layer1.setStyle(function(feature) {
    return /** @type {!google.maps.Data.StyleOptions} */ ({
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    });
  });
  layer1.setMap(map);
  var layer2 = new google.maps.Data();
  layer2.loadGeoJson(url2);
  layer2.setStyle(function(feature) {
    return /** @type {!google.maps.Data.StyleOptions} */ ({
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
    });
  });
  layer2.setMap(map);
  // Set event listener for each feature.
  function handleClicks(event) {
    infowindow.setContent(
      "<table>" +
      "<tbody>" + "<th>Name:</th>" + "<td>" + event.feature.getProperty('Name') + "</td>" + "</tbody>" +
      "<tbody>" + "<th>Status:</th>" + "<td>" + event.feature.getProperty('Status') + "</td>" + "</tbody>" +
      "<tbody>" + "<th>Lat_DMS:</th>" + "<td>" + event.feature.getProperty('Lat_DMS') + "</td>" + "</tbody>"


    );
    infowindow.setPosition(event.latLng);
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -34)
    });
    infowindow.open(map);
  }
  layer1.addListener('click', handleClicks);
  layer2.addListener('click', handleClicks);

}
google.maps.event.addDomListener(window, 'load', initialize);

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map2 {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map2"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>