Изменить стиль маркера, добавленного скриптом

Question

Я изучаю API Карт Google и следую примеру землетрясения на их веб-сайте.Я прочитал документацию и потратил несколько часов, пытаясь выяснить это, но безуспешно.

В примере их маркеры добавляются на .addGeoJson и стилизуются с помощью функции, которая превращает их в круги, которые различаются поразмер основан на магнитуде землетрясения.Я пытаюсь создать дополнительный маркер в скрипте и стилизовать его, используя ту же функцию стилей, но я не могу понять, как применить функцию к новому маркеру.Что я сделал:

// My addition:
newMarker = new google.maps.Marker({
  position: {lat:20, lng: -160},
  map: map,
  mag: 2
});

// The markers from .loadGeoJson are styled by calling this function but 
// apparently it doesn't apply to the new marker
map.data.setStyle(styleFeature);

Полагаю, newMarker не добавляется к объекту слоя данных по умолчанию, где, вероятно, находятся другие маркеры? Полный jsfiddle здесь

Answer 1

У вас есть два варианта.

1. В настоящее время вы делаете «нормальный» маркер (не используя DataLayer). Чтобы стилизовать его так же, как и стили маркеров слоя данных, создайте функцию, которая делает маркер таким же образом:

function createMarker(latLng, mag) {
  var low = [151, 83, 34]; // color of mag 1.0
  var high = [5, 69, 54]; // color of mag 6.0 and above
  var minMag = 1.0;
  var maxMag = 6.0;

  // fraction represents where the value sits between the min and max
  var fraction = (Math.min(mag, maxMag) - minMag) /
    (maxMag - minMag);

  var color = interpolateHsl(low, high, fraction);
  var marker = new google.maps.Marker({
    position: latLng,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      strokeWeight: 0.5,
      strokeColor: '#fff',
      fillColor: color,
      fillOpacity: 2 / mag,
      // while an exponent would technically be correct, quadratic looks nicer
      scale: mag
    },
    zIndex: Math.floor(mag),
    map: map
  });
  return marker;
}

подтверждение концепции скрипки

2. Если вы хотите добавить местоположение к слою данных и иметь стиль слоя данных, то вам нужно сделать это:

  map.data.add({
    geometry: new google.maps.Data.Point({
      lat: 20,
      lng: -160
    }),
    properties: {
    mag: 2
    }
  });

Тогда он будет стилизован как все остальные

подтверждение концепции скрипки

фрагмент кода:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 20,
      lng: -160
    },
    zoom: 2,
    styles: mapStyle
  });
  map.data.add({
    geometry: new google.maps.Data.Point({
      lat: 20,
      lng: -160
    }),
    properties: {
      mag: 2
    }
  });

  map.data.setStyle(styleFeature);

  // Get the earthquake data (JSONP format)
  // This feed is a copy from the USGS feed, you can find the originals here:
  //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  var script = document.createElement('script');
  script.setAttribute(
    'src',
    'https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json');
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data) {
  map.data.addGeoJson(data);
}

function styleFeature(feature) {
  var low = [151, 83, 34]; // color of mag 1.0
  var high = [5, 69, 54]; // color of mag 6.0 and above
  var minMag = 1.0;
  var maxMag = 6.0;

  // fraction represents where the value sits between the min and max
  var fraction = (Math.min(feature.getProperty('mag'), maxMag) - minMag) /
    (maxMag - minMag);

  var color = interpolateHsl(low, high, fraction);

  return {
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      strokeWeight: 0.5,
      strokeColor: '#fff',
      fillColor: color,
      fillOpacity: 2 / feature.getProperty('mag'),
      // while an exponent would technically be correct, quadratic looks nicer
      scale: Math.pow(feature.getProperty('mag'), 2)
    },
    zIndex: Math.floor(feature.getProperty('mag'))
  };
}


function interpolateHsl(lowHsl, highHsl, fraction) {
  var color = [];
  for (var i = 0; i < 3; i++) {
    // Calculate color based on the fraction.
    color[i] = (highHsl[i] - lowHsl[i]) * fraction + lowHsl[i];
  }

  return 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)';
}

var mapStyle = [{
  'featureType': 'all',
  'elementType': 'all',
  'stylers': [{
    'visibility': 'off'
  }]
}, {
  'featureType': 'landscape',
  'elementType': 'geometry',
  'stylers': [{
    'visibility': 'on'
  }, {
    'color': '#fcfcfc'
  }]
}, {
  'featureType': 'water',
  'elementType': 'labels',
  'stylers': [{
    'visibility': 'off'
  }]
}, {
  'featureType': 'water',
  'elementType': 'geometry',
  'stylers': [{
    'visibility': 'on'
  }, {
    'hue': '#5f94ff'
  }, {
    'lightness': 60
  }]
}];

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

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