谷歌地图自定义标签 x 和 y 位置答案

【问题标题】：Google Maps custom label x and y position谷歌地图自定义标签 x 和 y 位置
【发布时间】：2016-09-23 07:53:46
【问题描述】：

我正在尝试调整自定义标签的 x 和 y 位置。这可能吗？到目前为止，我还没有遇到任何有关此问题的文档。

numberMarkerImg = {
    url: '../images/mobile/map-marker.png',
    size: new google.maps.Size(32, 38),
    scaledSize: new google.maps.Size(32, 38)
};

// Letter markers
marker = new google.maps.Marker({
    position : point,
    map      : map,
    icon     : numberMarkerImg,
    draggable: false,
    labelClass: "labels",
    label: {
        text: saved_label,
        color: 'black',
        fontSize: '12px',
        x: '200',
        y: '100'
    }
});

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

这里没有提到的另一个选项。您可以为标签设置 CSS 类，然后使用 CSS 设置位置。首先，将 className 添加到标签中：

label: {
    text: saved_label,
    color: 'black',
    fontSize: '12px',
    className: 'marker-position',
}

对于 CSS：

.marker-position {
    bottom: 6px;
    left: 0;
    position: relative;
}

【讨论】：

【解决方案2】：

对于 v3，您可以像这样使用它。图片中显示的蓝色指针是我用作 svg 的图标。带有此图标的适当标签位置。

  iconSVG = {
    path: `M13.04,41.77c-0.11-1.29-0.35-3.2-0.99-5.42c-0.91-3.17-4.74-9.54-5.49-10.79c-3.64-6.1-5.46-9.21-5.45-12.07
        c0.03-4.57,2.77-7.72,3.21-8.22c0.52-0.58,4.12-4.47,9.8-4.17c4.73,0.24,7.67,3.23,8.45,4.07c0.47,0.51,3.22,3.61,3.31,8.11
        c0.06,3.01-1.89,6.26-5.78,12.77c-0.18,0.3-4.15,6.95-5.1,10.26c-0.64,2.24-0.89,4.17-1,5.48C13.68,41.78,13.36,41.78,13.04,41.77z
        `,
    fillColor: '#0084ff',
    fillOpacity: 1,
    strokeColor: '#ffffff',
    strokeWeight: 1,
    anchor: new google.maps.Point(14, 43),
    labelOrigin: new google.maps.Point(13.5, 15)
  };

此序列是找到正确位置的更快方法。大小、锚点、labelOrigin

【讨论】：

【解决方案3】：

“labelOrigin”最终不得不传入，因为我使用的是自定义标记。

   numberMarkerImg = {
        url: '../images/mobile/map-marker.png',
        size: new google.maps.Size(32, 38),
        scaledSize: new google.maps.Size(32, 38),
        labelOrigin: new google.maps.Point(9, 9)
   };

【讨论】：

【解决方案4】：

Google Maps API v3 不允许您设置MarkerLabel position，没有x 和y 选项。

文档还说：

如果您将其与自定义标记一起使用，您可以使用 Icon 类中的 labelOrigin 属性重新定位它。

我可以看到您正在使用自定义标记，所以也许这是适合您的方式。

或者，看看MarkerWithLabel。是默认 Marker 对象的扩展，提供更多选项。小演示：http://jsfiddle.net/LLd4drvx/239/.

【讨论】：

谢谢马丁！我最终使用了“labelOrigin: new google.maps.Point(9, 9)”