Google Maps標記圖標為變量

Question

創建谷歌地圖可視化。 目前，我正在使用API​​通過Google的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';

但是我認為仍然為每個圖釘調用該URL。 有什么方法可以執行此操作，而只需調用URL 1次？

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

是正確的，並且正如注釋中指出的那樣，每個唯一的圖像僅被提取一次，然后由瀏覽器緩存以重新使用。

不管您如何訪問，都是如此。

另外， 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 。