更改Google Maps 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>

Answer 2

这似乎可行，但不确定哪个是更好的解决方案，但是使用该解决方案，我的信息窗口的单击处理程序仍然可以工作

map.data.setStyle(function(feature) {
    var marker = feature.getProperty('Status');
    var markerCheck = marker === 'Active' ? 'https://cdn.mapmarker.io/api/v1/font-awesome/v5/pin?text=P&size=40&background=D94B43&color=FFF&hoffset=-1' : 'https://cdn.mapmarker.io/api/v1/font-awesome/v5/icon?icon=fa-star-solid&size=50&color=DC4C3F';
    var colorCheck = marker === 'Active' ? "#0000FF" : "#000000";
    return {
      icon: markerCheck,
      strokeColor: colorCheck
    };
  });