Google将标记图标映射为变量

时间:2013-11-14 16:41:09

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

创建谷歌地图可视化。目前我正在使用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一次而不是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';

但我认为仍会为每个引脚调用URL。有没有办法可以执行此操作,只需要调用URL 1次?

1 个答案:

答案 0 :(得分: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属性只接受字符串,因此即使您正确创建了新的JavaScript Image对象,也无法将其传递给icon属性。< / p>

对于记录,要创建Image对象,您将使用以下语法:

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

有关图片的详情,请参阅MDN