Google Maps API，添加带有标签的自定义SVG标记 [英] Google Maps API, add custom SVG marker with label

问题描述

我正在尝试为我的SVG标记添加一个标签，并且我对标记的文本位置存在问题，反之亦然。

这是我的图标：

  var clickIcon = {
路径：'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（{
位置：地点，
地图：地图，
动画：google.maps.Animation.DROP ，
 draggable：isDraggable，
 icon：clickIcon，
 label：{
 text：labels [labelIndex ++％labels.length]，
 color：'black'，
 fontSize：'15px'，
 fontWeight：'bold'
} 
}）; 
  

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

解决方案

使用 labelOrigin 属性rel =nofollow>符号

labelOrigin

：Point

如果标记由标记提供，则标签相对于路径原点的原点。默认情况下，原点位于（0，0）。原点用与符号路径相同的坐标系表示。

代码片段：

此属性未用于折线上的符号。

  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％;宽度：100％; margin：0px; < script src =https：//

I'm trying to add a label to my SVG marker, and I'm having a problem with the position of the text with respect to the marker or vice-versa.

This is my icon:

  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
  };

And this where I add the marker:

  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'
  }
  });

Please notice that I only added the relevant code, if more is needed let me know. As you can see, I can't align the label and the marker. Ideally, I would like to have it inside the pin circle, but below the pin would work as well. Thanks in advance.

解决方案

Use the labelOrigin property of the Symbol

labelOrigin

Type: Point

The origin of the label relative to the origin of the path, if label is supplied by the marker. By default, the origin is located at (0, 0). The origin is expressed in the same coordinate system as the symbol's path. This property is unused for symbols on polylines.

code snippet:

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"></script>
<div id="map_canvas"></div>

这篇关于Google Maps API，添加带有标签的自定义SVG标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！