javascript - Google Maps API, add custom SVG marker with label - Stack Overflow

admin管理员组

文章数量:1388620

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.

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.

• javascript
• google-maps
• google-maps-api-3
• svg

Share Improve this question Follow asked Oct 24, 2015 at 17:53 cubanGuycubanGuy 1,29655 gold badges2828 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

本文标签： javascriptGoogle Maps Apiadd custom SVG marker with labelStack Overflow