Javascript 如何在谷歌地图中对齐标记的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12093327/
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
How to align the icon of a marker in google map
提问by illinois
In google map usually the center bottom of the image of the marker is the lat lng of a point that it has to mark.
在谷歌地图中，标记图像的中心底部通常是它必须标记的点的纬度。
Imagine my marker icon is a circle, I would like the center of it to be at the lat-lng of the given point...
想象一下我的标记图标是一个圆圈，我希望它的中心位于给定点的纬度...
Code:
代码：
var image_hotspot = 'img/icons/bank_euro.png';
var marker = new google.maps.Marker({
map: map,
position: placeLoc,
icon: image_hotspot
});
回答by WojtekT
What You need is to create a MarkerImageobject, for example:
您需要的是创建一个MarkerImage对象，例如：
var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png',
new google.maps.Size(30, 30),
new google.maps.Point(0, 0),
new google.maps.Point(15, 15));
Where first parameter is an image url, second is image size, third is origin point of image, and fourth is position on the image where marker should point.
If your marker is a circle then set fourth parameter to center of the image.
And create your marker passing markerImageto icon property:
其中第一个参数是图像 url，第二个是图像大小，第三个是图像的原点，第四个是图像上标记应指向的位置。如果您的标记是圆形，则将第四个参数设置为图像的中心。并创建传递markerImage给 icon 属性的标记：
var marker = new google.maps.Marker({
map: map,
position: placeLoc,
icon: markerImage
});
回答by Sabino Velasquez
From the docs:
从文档：
Converting MarkerImage objects to type Icon
将 MarkerImage 对象转换为类型 Icon
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
becomes
变成
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
https://developers.google.com/maps/documentation/javascript/markers
https://developers.google.com/maps/documentation/javascript/markers
回答by velop
With v3 of google Maps you could / should use:
使用 v3 的谷歌地图，您可以/应该使用：
new maps.Marker({
...
icon: {
url: '.../myimage.png',
scaledSize: new maps.Size(60, 30),
anchor: new maps.Point(30, 30),
},
});
https://developers.google.com/maps/documentation/javascript/reference#Icon
https://developers.google.com/maps/documentation/javascript/reference#Icon
回答by wilfredonoyola
If you are using addMarker and need set the x,y coordinates using Point(x, y)
如果您正在使用 addMarker 并且需要使用 Point(x, y) 设置 x,y 坐标
let markerInstance = mapInstance.addMarker({
lat : _lat,
lng : _lng,
label: '8',
icon : {
url : 'url_image.png',
origin: new google.maps.Point(0, 0),
}
});
