Google Maps V3 标签对齐方式

Question

我在 google 地图中创建了一个自定义标记并想在其上设置标签（1 和 2），但不知何故我无法定位它并且它总是定位错误：

我已经尝试设置不同的锚点，但它们似乎不会移动

var t = this,
       markerConfig = {
           lat: location.data('lat'),
           lng: location.data('lng'),
           label: location.data('id').toString(), color: 'white'
       },
       iconSize = 0.45,
       icon = {
           path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
           fillColor: '#00492C',
           fillOpacity: 1,
           strokeWeight: 0,
           scale: iconSize,
           anchor: new google.maps.Point(38, 80),

       };
   t.marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
       label: {
           text: markerConfig.label,
           color: 'red',
       },
       icon: icon,
   })
};

我希望它与标记的中心对齐。

Answer 1

要更改标签相对于标记的位置，请使用 labelOrigin:

labelOrigin
Type: Point
The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.

相关问题：

labelOrigin: new google.maps.Point(30, 30) 与您的标记一起使用（看起来 anchor 稍微偏离，anchor: new google.maps.Point(32, 80), 似乎效果最好。

var markerConfig = {
  lat: 12.97,
  lng: 77.59,
  label: "1",
  color: 'white'
},
iconSize = 0.45,
icon = {
    path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
    fillColor: '#00492C',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: iconSize,
    anchor: new google.maps.Point(32, 80),
    labelOrigin: new google.maps.Point(30, 30)
  };
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
  label: {
    text: markerConfig.label,
    color: 'red',
  },
  icon: icon,
});

proof of concept fiddle

代码片段：

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 12.97,
      lng: 77.59
    }
  });

  var markerConfig = {
      lat: 12.97,
      lng: 77.59,
      label: "1",
      color: 'white'
    },
    iconSize = 0.45,
    icon = {
      path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
      fillColor: '#00492C',
      fillOpacity: 1,
      strokeWeight: 0,
      scale: iconSize,
      anchor: new google.maps.Point(32, 80),
      labelOrigin: new google.maps.Point(30, 30)
    };
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
    label: {
      text: markerConfig.label,
      color: 'red',
    },
    icon: icon,
  });
};
google.maps.event.addDomListener(window, 'load', initialize);

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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Google Maps V3 标签对齐方式

Google Maps V3 Label alignment

google-maps

google-maps-api-3

google-maps-markers