Question

我正在实施例程，在Google maps api中为标记显示不同大小的图标，如本页所示： https://developers.google.com/academy/apis/maps/visualizing/earthquakes（查看圈子示例）：

window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var earthquake = results.features[i];
    var coords = earthquake.geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: getCircle(earthquake.properties.mag)
    });
  }
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / Math.PI,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

在Chrome中，一切都很好，但是当我在IE9中这样做时，对于许多标记来说它的速度很慢。它必须在IE9中，因为我在我的应用程序中自动化IE9）。那是因为IE9在SVG上工作得非常慢。所以我正在尝试一种不同的方法，使用图标而不是SVG生成的圆圈。为此，我需要使用JS（我的项目中没有服务器代码）动态生成它们，然后将圆圈保存到磁盘并将它们分配给标记。

如何仅使用JS？

生成并将圆圈保存为透明PNG

在javascript中生成透明圆圈（客户端）

0 个答案: