通过 google.maps.SymbolPath.CIRCLE 自定义 Google 地图标记答案

【问题标题】：Google map Marker customization by google.maps.SymbolPath.CIRCLE通过 google.maps.SymbolPath.CIRCLE 自定义 Google 地图标记
【发布时间】：2021-03-09 22:46:06
【问题描述】：

我正在使用谷歌地图作为我的地图并在地图中展示标记，因为我之前使用的是 mapBOX，所以我们展示的地图标记如下显示在地图中。

但是通过使用谷歌地图作为标记，我使用 google.maps.SymbolPath.CIRCLE 作为圆形标记。

但我的情况有几次我想使用 SQUARED MARKERS 和标记内的一些文本。

我怎样才能做到这一点，在这种情况下我必须使用任何特殊的库吗？

请参考此屏幕截图，并对此进行指导。

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

您可以为google.maps.Symbols 定义自定义路径。下面是一个基于example in the documentation 的示例。可以加a single character "label" to the marker。

var square = {
    path: 'M -2,-2 2,-2 2,2 -2,2 z', // 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1,
    scale: 5
  };
  var marker = new google.maps.Marker({
    position: {lat: 21.5, lng: 153.027},
    map: map,
    icon: square,
      label: {
      text:"X",
      fontWeight: "bold"
    }
  });

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 21.5,
      lng: 153.027
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the custom symbols. All symbols are defined via SVG path notation.
  var square = {
    path: 'M -2,-2 2,-2 2,2 -2,2 z', // 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1,
    scale: 5
  };
  var marker = new google.maps.Marker({
    position: {
      lat: 21.5,
      lng: 153.027
    },
    map: map,
    icon: square,
    label: {
      text: "X",
      fontWeight: "bold"
    }

  });
  var toggle = false;
  google.maps.event.addListener(marker, 'click', function(evt) {
    if (!toggle) {
      this.setLabel({
        text: "X",
        color: "white",
        fontWeight: "bold"
      });
    } else {
      this.setLabel({
        text: "X",
        color: "black",
        fontWeight: "bold"
      });
    }
    toggle = !toggle;
  });

}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

【讨论】：