Google Maps API，添加带有标签的自定义 SVG 标记

Posted 2023-02-23

【中文标题】Google Maps API，添加带有标签的自定义 SVG 标记

【英文标题】：Google Maps API, add custom SVG marker with label

【发布时间】：2016-01-24 02:49:12

【问题描述】：

我正在尝试向我的 SVG 标记添加标签，但文本相对于标记的位置存在问题，反之亦然。

这是我的图标：

  var clickIcon = 
      path: 'M8,0C3.400,0,0,3.582,0,8s8,24,8,24s8-19.582,8-24S12.418,0,8,0z M8,12c-2.209,0-4-1.791-4-4   s1.791-4,4-4s4,1.791,4,4S10.209,12,8,12z',
      fillColor: myRandomColor,
      fillOpacity: 1,
      strokeColor: myRandomColor,
      strokeWeight: 1
  ;

这是我添加标记的地方：

  clickMarker = new google.maps.Marker(
  position: location,
  map: map,
  animation: google.maps.Animation.DROP,
  draggable: isDraggable,
  icon: clickIcon,
  label: 
      text: labels[labelIndex++ % labels.length],
      color: 'black',
      fontSize: '15px',
      fontWeight: 'bold'
  
  );

请注意，我只添加了相关代码，如果需要更多，请告诉我。如您所见，我无法对齐标签和标记。理想情况下，我希望将它放在引脚圈内，但在引脚下方也可以。提前致谢。

【参考方案1】：

使用Symbol 的labelOrigin 属性

标签来源

类型：点

标签的原点相对于路径的原点，如果标签由标记提供。默认情况下，原点位于 (0, 0)。原点在与符号路径相同的坐标系中表示。此属性不适用于折线上的符号。

代码 sn-p：

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 clickIcon = 
    path: 'M8,0C3.400,0,0,3.582,0,8s8,24,8,24s8-19.582,8-24S12.418,0,8,0z M8,12c-2.209,0-4-1.791-4-4   s1.791-4,4-4s4,1.791,4,4S10.209,12,8,12z',
    fillColor: "#ff0000",
    fillOpacity: 1,
    strokeColor: "#ff0000",
    strokeWeight: 1,
    labelOrigin: new google.maps.Point(8, 10),
    anchor: new google.maps.Point(9, 35),
  ;
  var clickMarker = new google.maps.Marker(
    position: map.getCenter(),
    map: map,
    // animation: google.maps.Animation.DROP,
    draggable: true,
    icon: clickIcon,
    label: 
      text: "A",
      color: 'black',
      fontSize: '15px',
      fontWeight: 'bold'
    
  );

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

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

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