Google Maps v3 custom marker icon does not keep it's position on map

问题

Developing with Google Maps v3.

For some sort of reason, my custom marker icon "change" it's position on zoom in-out. It looks like it have some sort of "padding" property, that not changes together with zoom.

It means that it position is correct on maximum zoom (18), but if I change zoom value, it "moves" a bit to top, and it makes problem on smaller zoom values, because it looks like it is not on same position as it is.

Marker is defined as:

var image = new google.maps.MarkerImage('img/antennas/img.png',new google.maps.Size(100, 100));

This maybe can help: marker icon is squared shape, 100x100px, and it's center is in middle of the image, not on the bottom like "normal" markers.

UPDATE: do I have to do something with anchor property?

回答1:

You have to set the anchor of the marker. The default is center bottom.

See http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage

回答2:

Instead of using only a Marker, use also a MarkerImage, to be used as the marker.

In this example I use a mark that is a circle with a point in the middle, so I always want it centered.

Example

 var marker_image = new google.maps.MarkerImage(
        '../Media/icon_maps_marker.png',
         null,
         // The origin for my image is 0,0.
         new google.maps.Point(0, 0),
         // The center of the image is 50,50 (my image is a circle with 100,100)
         new google.maps.Point(50, 50)
     );
    var marker = new google.maps.Marker({
        clickable: true,
        map: map,
        position: center_location,
        icon: marker_image,
    });

回答3:

Based on your description of "padding", this sounds like it is an issue with the positioning of your MarkerImage. Try tweaking the anchor property of the MarkerImage. By default, the anchor is at the bottom center of your image. If you want the image to be centered, you will have to move the anchor down half the size of the image to center it.

See http://code.google.com/intl/no/apis/maps/documentation/javascript/reference.html#MarkerImage for reference.

回答4:

See the anchor property in icon: anchor: new google.maps.Point(0, 0)

var icon = {
    url: image,
    anchor: new google.maps.Point(0, 0)
  };

  marker = new google.maps.Marker({
    position: Latlng,
    map: map,
    icon: icon,
    optimized: false
  });

来源：https://stackoverflow.com/questions/9321752/google-maps-v3-custom-marker-icon-does-not-keep-its-position-on-map