1

我为谷歌地图使用自定义标记图标。我的问题很简单，我准备的透明 png 在底部有额外的 23px 空白空间 - 这是为一些 Photoshop 发光效果完成的，但实际的标记点从底部 23px 开始。

我如何考虑到这一点，以便标记落在正确的位置？我需要像 margin-bottom:-23px; 这样的东西 但使用 javascript。

困难的方法是以 latlong 度量计算 23px，而不是调整标记位置。但这会非常丑陋...

有任何想法吗？

到目前为止，我有这个：

var marker_icon = new google.maps.MarkerImage('<?php echo get_bloginfo("template_url"); ?>/images/marker.png', new google.maps.Point(10,10));
                                var marker = new google.maps.Marker({
                                  position: latlngPos,
                                  map: map,
                                  icon: marker_icon
                                });

但是由于我将 icon: 更改为变量，所以我再也看不到标记了。控制台什么也没告诉我。

图片是这样的：

在此处输入图像描述

4

2 回答 2

2

请参阅有关如何定义自定义图标的文档

锚| 点 | 与地图上标记的位置相对应的锚定图像的位置。默认情况下，锚点位于图像底部的中心点。

网址 | 字符串 | 图片或精灵表的 URL。google.maps.MarkerShape 对象规范

它是从图像的左上角 (0, 0) 计算的。但是你没有提供尺寸。

开发人员指南（示例）

你的图片是 59px × 72px 所以我认为锚点应该是 72-23: new google.maps.Point(30,49);

var marker_icon = {
   url: <your url>,
   size: new google.maps.Size(59,72),
   origin: new google.maps.Point(0,0),
   anchor: new google.maps.Point(30,49)
};
于 2013-03-20T14:19:05.680 回答
0

解决方案是这样做：

var marker_icon = {
                                      url: '<?php echo get_bloginfo("template_url"); ?>/images/marker.png',
                                      size: new google.maps.Size(59,72),
                                      origin: new google.maps.Point(0,0),
                                      anchor: new google.maps.Point(29,58)
                                    };

感谢 geocodezip 的指导。

于 2013-03-20T14:59:58.353 回答