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

您有两个选择。

当前，您正在制作“普通”标记（不使用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;
}

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>

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

1 个答案: