javascript - 更改脚本添加的标记的样式

Question

我正在学习 Google Maps API 并遵循 earthquakes example在他们的网站上。我已阅读文档并花了几个小时试图解决这个问题，但没有成功。

该示例通过 .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 没有添加到默认数据层对象中，其他标记可能位于其中？ Full jsfiddle here

Answer 1

你有两个选择。

1. 目前您正在制作一个“普通”标记(不使用数据层)。要以与数据层标记相同的方式设置样式，请创建一个函数，使标记以相同的方式设置样式:

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

proof of concept fiddle

如果您想将位置添加到数据层并让数据层为其设置样式，那么您需要执行以下操作:

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

然后它的样式就会像所有其他的一样

proof of concept fiddle

代码片段:

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>