google maps API v3，标记图标具有透明填充，如何计算此填充的位置? [英] google maps API v3, marker icon has transparent padding, how do I position it counting this padding?

问题描述

我将自定义标记图标用于Google Maps.我的问题是我准备的简单，透明的png底部有23px的空白空间-这样做是为了实现一些Photoshop发光效果，但是标记的实际点从底部开始23px.

I use custom marker Icon for google Maps. My problem is simple, transparent png that I prepared has extra 23px of empty space at the bottom - this is done for some photoshop glow effect, but an actual point of marker starts at 23px from bottom.

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

How do I take this into consideration so that marker lands on the right spot? I need something like margin-bottom:-23px; but with javascript.

最困难的方法是以latlong度量计算23px，然后调整标记位置.但这真是丑陋的...

Hard way would be to calculate 23px in latlong measures and than adjust marker position. But that would be insanely ugly...

有什么想法吗?

到目前为止，我是这样的:

so far I've this:

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:更改为变量，所以我不再看到标记.控制台什么也没告诉我.

but since I changed icon: to the variable, I don't see marker anymore. Console tells me nothing.

图像是这样的:

推荐答案

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

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

anchor | Point | The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.

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

url | string | The URL of the image or sprite sheet. google.maps.MarkerShape object specification

它是从图像的左上角(0，0)开始计算的.但是您尚未提供尺寸.

It is computed from the top left corner of the image (0, 0). But you haven't provided the size.

开发人员指南(带有示例)

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

Your image is 59px × 72px So I think the anchor should be 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)
};

这篇关于google maps API v3，标记图标具有透明填充，如何计算此填充的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！