Question

我正在使用谷歌地图api并想创建一些自定义标记，它们除了颜色都是一样的，我不想像这样重复代码

 // Add a custom marker
var marker1 = {
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
    fillColor: '#ff61b4',
    fillOpacity: 0.95,
    scale: 2,
    strokeColor: '#fff',
    strokeWeight: 3,
    anchor: new google.maps.Point(12, 24)
};

var marker2 = {
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
    fillColor: '#05950a',
    fillOpacity: 0.95,
    scale: 2,
    strokeColor: '#fff',
    strokeWeight: 3,
    anchor: new google.maps.Point(12, 24)
};

当我想使用标记

时

 // Markers
var marker = new google.maps.Marker({
    map: map,
    icon: marker, // can i override the fillColor here ?
    position: new google.maps.LatLng(51.489401, -3.203586),
    title: 'title'
});

我希望能够声明一个标记，然后覆盖fillColor，我怎么能这样做呢？

由于

Answer 1

一个选项是使用一个函数来生成图标（即一个Empolyees函数），它将颜色作为参数并返回图标匿名对象：

createIcon

然后在创建标记时使用它：

function createIcon(color) {
  return {
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
    fillColor: color,
    fillOpacity: 0.95,
    scale: 2,
    strokeColor: '#fff',
    strokeWeight: 3,
    anchor: new google.maps.Point(12, 24)
  };
}

proof of concept fiddle

代码段

＆＃13;

var marker1 = new google.maps.Marker({
    map: map,
    position: {
      lat: 37.448,
      lng: -122.143
    },
    icon: createIcon('#ff61b4')
  });

＆＃13;

function createIcon(color) {
  return {
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
    fillColor: color,
    fillOpacity: 0.95,
    scale: 2,
    strokeColor: '#fff',
    strokeWeight: 3,
    anchor: new google.maps.Point(12, 24)
  };
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: createIcon('blue')
  });
  var marker1 = new google.maps.Marker({
    map: map,
    position: {
      lat: 37.448,
      lng: -122.143
    },
    icon: createIcon('#ff61b4')
  })
  var marker2 = new google.maps.Marker({
    map: map,
    position: {
      lat: 37.44,
      lng: -122.148
    },
    icon: createIcon('#05950a')
  });

}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

Answer 2

您可以使用setOptions，例如：仅更改图标

marker.setOptions({
     icon = "http://labs.google.com/ridefinder/images/mm_20_white.png"
});

或可点击

marker.setOptions({clickable:false});

因此您可以对所有标记选项执行相同的操作

谷歌地图api和自定义标记

2 个答案: