谷歌在 icon-fillColor 和 strokeColor 之间映射标记图标填充答案

【问题标题】：Google maps Marker icon padding between icon-fillColor and strokeColor谷歌在 icon-fillColor 和 strokeColor 之间映射标记图标填充
【发布时间】：2019-04-05 19:20:01
【问题描述】：

我正在尝试在 icon-fillColor 和外部 StrokeColor 之间创建一个带有填充的 Google 地图标记图标。

我的标记代码：

marker = new google.maps.Marker({
id: i,
position: position,
label: {
    text: 'id',
    color: "white",
    fontWeight: 'bold',
    fontSize: '16px',
},
map: map,
title: "My Title",
icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 15,
    fillColor: "#4A86FE",
    fillOpacity: 1.0,
    strokeWeight: 6,
    strokeOpacity: 0.8,
    strokeColor:"red",
    rotation: 30
},
animation: google.maps.Animation.DROP,});

我的当前输出：如果你能看到内蓝色圆圈和外红色圆圈相互接触。我正在尝试在内部和外部之间编码白色。检查我的预期输出。

我想要达到的目标如下：

【问题讨论】：

为什么不创建一个自定义的自定义 SVG 图标？
图标颜色将是动态的，标签颜色，标签文本，颜色..每个标记几乎所有东西都是动态的..所以它很复杂。 :(
标记的标签颜色和标签文本是可配置的（在标记类中）。您可以使用google.maps.SymbolPath.CIRCLE（fillColor、fillOpacity、strokeOpacity、strokeWeight 和 strokeColor）控制的内容有限，您无法创建那个白色波段。您可以尝试叠加两个图标或制作自定义 SVG 图标（以及设置您关心的参数的方法）。这些都没有内置到 API 中。
我找不到这样的例子，有什么文档链接可以参考吗？我不确定 SVG 图标是否适合我，但我喜欢重叠两个图标的概念。谢谢。 @geocodezip

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

这样的事情（使用两个重叠的标记）应该可以工作，您可以添加额外的参数（或创建一个“选项”对象）来定义各个部分的颜色：

function makeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
  var bottom = new google.maps.Marker({
    zIndex: 10, // bottom
    id: id,
    position: latLng,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 6,
      strokeOpacity: 0.8,
      strokeColor: outsideColor,
      rotation: 30
    },
  });
  var top = new google.maps.Marker({
    zIndex: 15, // top
    id: id,
    position: latLng,
    label: label,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 2,
      strokeOpacity: 0.8,
      strokeColor: stripeColor,
      rotation: 30
    },
  });

proof of concept fiddle

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -25.363882,
      lng: 131.044922
    }
  });

  var position = map.getCenter(),
    i = 10;
  makeComplexIcon(map, position, "#4A86FE", "white", "red", "My Title", i, {
    text: 'id',
    color: "white",
    fontWeight: 'bold',
    fontSize: '16px',
  });
  makeComplexIcon(map, {
    lat: -27.6728168,
    lng: 121.6283098
  }, "green", "yellow", "orange", "W. Australia", 12, {
    text: 'id1',
    color: "blue",
    fontWeight: 'bold',
    fontSize: '16px',
  })
  makeComplexIcon(map, {
    lat: -30.0,
    lng: 136.2
  }, "black", "white", "black", "S. Australia", 14, {
    text: 'id2',
    color: "red",
    fontWeight: 'bold',
    fontSize: '16px',
  })
}

function makeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
  var marker = new google.maps.Marker({
    zIndex: 10, // bottom
    id: id,
    position: latLng,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 6,
      strokeOpacity: 0.8,
      strokeColor: outsideColor,
      rotation: 30
    },
  });
  var marker = new google.maps.Marker({
    zIndex: 15, // top
    id: id,
    position: latLng,
    label: label,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 2,
      strokeOpacity: 0.8,
      strokeColor: stripeColor,
      rotation: 30
    },
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

【讨论】：