7 回答

• 25

  使用Google Maps API的第3版，最简单的方法可能是 grab 自定义图标集，就像Benjamin Keen在这里创建的图标集：

  http://www.benjaminkeen.com/?p=105

  如果将所有这些图标放在与 Map 页面相同的位置，则可以在创建标记时使用相应的图标选项为标记着色：

  var beachMarker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: 'brown_markerA.png'
  });
  

  这非常简单，是我正在使用的方法，目前正在进行的项目 .

  回复于 2024-04-29T23:34:30+08:00
• 23

  由于不推荐使用maps v2，因此您可能对v3映射感兴趣：https://developers.google.com/maps/documentation/javascript/markers#simple_icons

  对于v2 Map ：

  http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

  您可以使用一组逻辑执行所有“常规”引脚，另一组使用定义的新标记执行“特殊”引脚 .

  回复于 2024-04-29T23:34:30+08:00
• 44

  MapIconMaker：Google Maps v2的库

  一种方法是使用MapIconMaker . 有一个例子here . Google Map 默认图标的宽度为20px，高度为34px，因此您可以使用以下内容来模拟：

  var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
  var marker = new GMarker(map.getCenter(), {icon: newIcon});
  

  您甚至可以将其包装在某些功能中，以使自己更容易：

  function getIcon(color) {
      return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
  }
  

  这就是我个人用于我创造的所有标记的东西 . 我更喜欢选择改变一时兴起的颜色 .

  更新：默认图标的十六进制颜色为“＃FE7569” . 此外，您可以在Marker上设置setImage，而不是使用新图标创建新Marker . 因此，如果你想要一个突出显示的功能，可以使用上面的函数：

  function highlightMarker(marker, highlight) {
      var color = "#FE7569";
      if (highlight) {
          color = "#0000FF";
      }
      marker.setImage(getIcon(color).image);
  }
  

  StyledMarker：Google Maps v3的库

  由于V2在前一段时间被V3取代，我想我应该更新这个答案 . 我为自定义标记创建了一个库，可以在V3 Utility Library here上找到 . 它允许不同的颜色和形状，您也可以在标记上放置文本 . 它的工作原理是使用Google Charts API，该API具有创建Google Maps类型标记的方法 . 如果您更愿意直接使用Google Charts API，请随时查看源代码 .

  然而，关于该库的事情是它负责为您定义这些标记图像的可点击区域，因此，例如，带有文本的较长气泡将具有可预期的可点击区域，如this example .

  回复于 2024-04-29T23:34:30+08:00
• 118

  （已弃用）Google Maps v3不需要任何自定义库 .

  var pinColor = "FE7569";
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
      new google.maps.Size(21, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(10, 34));
  var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
      new google.maps.Size(40, 37),
      new google.maps.Point(0, 0),
      new google.maps.Point(12, 35));
  var marker = new google.maps.Marker({
              position: new google.maps.LatLng(0,0), 
              map: map,
              icon: pinImage,
              shadow: pinShadow
          });
  

  来自Matt Burns这工作截至2014年10月，但已弃用 .

  回复于 2024-04-29T23:34:30+08:00
• 50

  就个人而言，我认为Google Charts API生成的图标看起来很棒，并且易于动态自定义 .

  在Google Maps API 3 - Custom marker color for default (dot) marker上查看我的回答

  回复于 2024-04-29T23:34:30+08:00
• 11

  我找到的最简单的方法是使用BitmapDescriptorFactory.defaultMarker（）documentation甚至有一个设置颜色的例子 . 从我自己的代码：

  MarkerOptions marker = new MarkerOptions()
              .title(formatInfo(data))
              .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
              .position(new LatLng(data.getLatitude(), data.getLongitude()))
  

  回复于 2024-04-29T23:34:30+08:00
• 2

  要自定义标记，您可以使用此在线工具执行此操作：https://materialdesignicons.com/

  在您的情况下，您需要可在此处使用的 Map 标记：https://materialdesignicons.com/icon/map-marker以及您可以在线自定义的 Map 标记 .

  如果您只想将默认红色更改为蓝色，则可以加载此图标：http://maps.google.com/mapfiles/ms/icons/blue-dot.png

  在这个帖子中提到过：https://stackoverflow.com/a/32651327/6381715

  回复于 2024-04-29T23:34:30+08:00