blocks|key|2733951|text|您需要创建一个MarkerImage对象，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2733952|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));|code-block|syntax|javascript|2733953|其中第一个参数是图像url，第二个参数是图像大小，第三个参数是图像的原点，第四个参数是图像上标记应该指向的位置。如果您的标记是一个圆，则将第四个参数设置为图像的中心。并将markerImage传递给图标属性来创建您的标记：|2733954|var+marker+=+new+google.maps.Marker({
++map:+map,
++position:+placeLoc,
++icon:+markerImage
});|2733955|entityMap^0|7|B|0|0|2D|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

What You need is to create a <code>MarkerImage</code> object, for example:

<pre><code>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));
</code></pre>

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 <code>markerImage</code> to icon property:

<pre><code>var marker = new google.maps.Marker({
 map: map,
 position: placeLoc,
 icon: markerImage
});
</code></pre>

blocks|key|46633|text|从文档中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|46634|将MarkerImage对象转换为类型图标|offset|length|style|BOLD|46635|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));|code-block|syntax|javascript|46636|变成了|46637|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)
};|46638|https://developers.google.com/maps/documentation/javascript/markers|46639|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|L|0|0|0|0|0|1V|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|R]]]]

From the docs:

Converting MarkerImage objects to type Icon

<pre><code>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));
</code></pre>

becomes

<pre><code>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)
};
</code></pre>

<a href="https://developers.google.com/maps/documentation/javascript/markers">https://developers.google.com/maps/documentation/javascript/markers</a>

blocks|key|2734132|text|使用谷歌地图的v3，您可以/应该使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2734133|new+maps.Marker({
++++++++++++...
++++++++++++icon:+{
++++++++++++++++url:+'.../myimage.png',
++++++++++++++++scaledSize:+new+maps.Size(60,+30),
++++++++++++++++anchor:+new+maps.Point(30,+30),
++++++++++++},
++++++++});|code-block|syntax|javascript|2734134|https://developers.google.com/maps/documentation/javascript/reference#Icon|offset|length|2734135|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|22|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

With v3 of google Maps you could / should use:

<pre><code>new maps.Marker({
 ...
 icon: {
 url: '.../myimage.png',
 scaledSize: new maps.Size(60, 30),
 anchor: new maps.Point(30, 30),
 },
 });
</code></pre>

<a href="https://developers.google.com/maps/documentation/javascript/reference#Icon" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/reference#Icon</a>

blocks|key|2734145|text|如果您使用的是addMarker并且需要使用Point(x，y)设置x，y坐标|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2734146|let+markerInstance+=+mapInstance.addMarker({
++++++++++++lat+:+_lat,
++++++++++++lng+:+_lng,
++++++++++++label:+'8',
++++++++++++icon+:+{
++++++++++++++url+:++'url_image.png',
++++++++++++++origin:++new+google.maps.Point(0,+0),
++++++++++++}
++++++++});|code-block|syntax|javascript|2734147|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are using addMarker and need set the x,y coordinates using Point(x, y)

<pre><code>let markerInstance = mapInstance.addMarker({
 lat : _lat,
 lng : _lng,
 label: '8',
 icon : {
 url : 'url_image.png',
 origin: new google.maps.Point(0, 0),
 }
 });
</code></pre>

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:

<pre><code>var image_hotspot = 'img/icons/bank_euro.png';
var marker = new google.maps.Marker({
 map: map,
 position: placeLoc,
 icon: image_hotspot
 });
</code></pre>

How to align the icon of a marker in google map

在google地图中，标记图像的中心和底部通常是要标记的点的最新lng。假设我的标记图标是一个圆，我希望它的中心在给定点的纬度上……代码：var image_hotspot = 'img/icons/bank_euro.png';var marker = new google.maps.Marker({      ma...

问如何在google地图中对齐标记图标
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在google地图中对齐标记图标EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在google地图中对齐标记图标
EN