1

Creating a google map visualization. Currently i am using an API to pull down colored markers using a URL from google; the base url is http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|

From here you can attach a color code to this URL like so; http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000

I would like to store these in some type of javascript variable so that I only have to call this URL 1 time instead of 100 times for each marker.

Current code which does not work. 

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

This seems to kind of resolve the issue. 

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

But I think the URL is still called for each pin. Is there a way I can perform this action and only have to call the URL 1 time?

4

1 回答 1

2

这不是有效的 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';

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

无论您如何访问它，这都是正确的。

此外，该icon属性只接受一个字符串，因此即使您Image正确创建了一个新的 JavaScript 对象，也无法将其传递给该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。

于 2013-11-14T17:03:15.473 回答