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

aanders77

我正在学习Google Maps API,并在他们的网站上跟踪地震的例子我已经阅读了文档,花了几个小时试图弄清楚这一点,但是没有运气。

该示例添加了它们的标记,.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在这里

地理编码

您有两个选择。

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

概念证明

生成的地图的屏幕截图,显示样式标记

  1. 如果要将位置添加到数据层并使其具有数据层样式,则需要执行以下操作:
  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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章