javascript 谷歌地图API:标记图像定位

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5318795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 16:47:58  来源:igfitidea点击:

Google maps API: Marker image positioning

javascriptapigoogle-maps-markersoffsetgoogle-maps-api-2

提问by David

I have changed the image that I use for a markeron Google maps. The new image is much wider than the old one and I have noticed that the marker is aligned with the latand lngso that the marker rests with it's horizontal midpoint over the latand lng. This is not what I want, I want to have the latand lngaligned with the markers left hand side - I want to offset the markerfrom the default position by about 80px to the right.

我已经更改了用于markerGoogle 地图上的图像。新的图像比旧的更广泛的,我已经注意到,标记与对齐latlng使标志在于它的通过水平中点latlng。这不是我想要的,我想让latlng与左侧的标记对齐 - 我想marker从默认位置向右偏移约 80 像素。

回答by Brian Noah

Try this on for size.

试试这个尺寸。

var markerImage = new google.maps.MarkerImage('/img/icon/here.png',
    new google.maps.Size(80, 80), //size
    new google.maps.Point(0, 0), //origin point
    new google.maps.Point(0, 80)); // offset point
marker[stamp] = new google.maps.Marker({
    position: loc, // loc is a variable with my lngLat object
    title: params.name,
    map: window.gMaps[params.map],
    icon: markerImage
});

回答by Jerph

You want the 'anchor' property of MarkerImage. Note that the origin property comes before anchor in the constructor call. If you're not using sprites, you can just send null for the optional parameters.

您需要MarkerImage的“锚点”属性。请注意,在构造函数调用中,origin 属性出现在锚之前。如果您不使用精灵,则可以只为可选参数发送 null。

If your marker is 80x60 and you want the anchor in the middle of the left side, create it like this:

如果您的标记是 80x60 并且您希望锚点位于左侧的中间,请按如下方式创建:

var markerImage = new google.maps.MarkerImage('customIcon.png', new google.maps.Size(80, 60), null, new google.maps.Point(0, 30));

See also Google's example.

另请参阅Google 的示例