谷歌地图标记图标作为变量答案

【问题标题】：Google maps marker icon as variable谷歌地图标记图标作为变量
【发布时间】：2013-11-27 19:08:19
【问题描述】：

创建谷歌地图可视化。目前我正在使用 API 使用来自谷歌的 URL 来下拉彩色标记；基本网址是http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|

您可以在此处将颜色代码附加到此 URL，如下所示； http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000

我想将这些存储在某种类型的 javascript 变量中，这样我只需为每个标记调用此 URL 1 次而不是 100 次。

当前代码不起作用。

 var highPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000; 
  var lowPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00; 
  var medPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569;

  balloons[1] = {
      center: new google.maps.LatLng(67.1679, 18.3974),
      id: 1,
      pin: highPin,
      addr: '00602',
      txt: 'stuff'
  };

  var bInfo = new google.maps.InfoWindow();

  for (i in balloons) {
      var balloonOptions = {
          map: map,
          id: balloons[i].id,
          position: balloons[i].center,
          icon: balloons[i].pin,
          infoWindowIndex: i
      };

      bMarker = new google.maps.Marker(balloonOptions);
      google.maps.event.addListener(bMarker, 'click', (function (bMarker, i) {

          return function () {
              if (bInfo) {
                  infoWindow.close();
                  tInfo.close();
                  bInfo.close();
              }
              bInfo.setContent(balloons[i].txt);
              bInfo.setPosition(balloons[i].center);
              bInfo.open(map);
          }
      })(bMarker, i));
  }

这似乎可以解决问题。

var highPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000'; 
var lowPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00'; 
var medPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569';

但我认为仍然会为每个 pin 调用 URL。有没有办法我可以执行此操作而只需调用 URL 1 次？

【问题讨论】：

当你想加载 1 张图片时，它必须被加载（通过 HTTP）。当您要加载 100 张图片时，必须通过 HTTP 加载 100 张图片。相信浏览器的缓存机制，这就是你所能做的。
除非你找到一种方法将图标标记保存在本地，那就是标记图标的URL路径。是的，每次您在地图上绘制标记时都会调用/获取它。
Molle 博士说得好。该图标可能会被缓存，并且该 URL 仅在浏览器会话中调用一次。
好吧，最坏的情况是我会有 2000 个气球标记。所以我真的不想让它进行 2000 次 HTTP 调用。我觉得这可能会引发某种类型的瓶颈。类似于在单个页面上重用图像的网页，我想如果所有内容都正确引用，它们只会被下载到客户端一次。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

这不是有效的 JavaScript：

var medPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569;

您将注释掉冒号 (:) 之后的所有内容。

var lowPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00';

是正确的，正如 cmets 中所指出的，每个唯一的图像都被提取一次且仅一次，然后由浏览器缓存以供重复使用。

无论您如何访问它都是如此。

另外，icon 属性只接受一个字符串，所以即使你正确地创建了一个新的 JavaScript Image 对象，你也无法将它传递给icon 属性。

为了记录，要创建一个Image 对象，您可以使用以下语法：

var medPin = new Image();
medPin.src = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00';

有关图片的更多信息，请参阅MDN。

【讨论】：