缩放时MarkerWithLabel移动

Question

我在Google地图上使用MarkerWithLabel并导入自己的图像标签时遇到问题，问题是当我放大和缩小标记时，标记从原始点向东南移动。 我不知道为什么，因为使用普通标记会一切正常，并且标记会粘在其位置上。 在链接到我的地图小提琴的下方。 有人可以告诉我如何使缩放时的标记不会从原始点移动吗？

谢谢。

http://jsfiddle.net/pfxvno07/1/

var latLng = new google.maps.LatLng(48.864716, 2.349014);


 var map;
  var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(48.864716, 2.349014),
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: true,
                panControl:true,
                zoomControl:true,
                mapTypeControl:true,
                scaleControl:true,
                streetViewControl:true,
                overviewMapControl:true,
                rotateControl:true
}

map = new google.maps.Map(document.getElementById('map'), mapOptions);


                var marker = new MarkerWithLabel({
                    position: latLng ,
                    draggable: false,
                    //raiseOnDrag: true,
                    map: map,
                    labelContent: 10+1,
                    labelAnchor: new google.maps.Point(0, 0),
                    labelClass: "label"+2, //the CSS class for the label
                    labelStyle: {opacity: 1},
                    icon: { url: '', size: null, origin: null, anchor: null}
                });

Answer 1

为图标设置正确的锚点。 您以非标准方式使用它。 这对我有用：

var marker = new MarkerWithLabel({
  position: latLng,
  draggable: false,
  map: map,
  labelContent: 10 + 1,
  labelAnchor: new google.maps.Point(16, 29),
  labelClass: "label" + 2, //the CSS class for the label
  labelStyle: {
    opacity: 1
  },
  icon: {
    url: 'http://momentale.com/resources/images/icon/mapPin_2.png',
    size: new google.maps.Size(32, 29)
  }
});

工作代码段：

 var latLng = new google.maps.LatLng(48.864716, 2.349014); var map; var mapOptions = { zoom: 15, center: new google.maps.LatLng(48.864716, 2.349014), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: true, panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true, rotateControl: true } map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new MarkerWithLabel({ position: latLng, draggable: false, //raiseOnDrag: true, map: map, labelContent: 10 + 1, labelAnchor: new google.maps.Point(16, 29), labelClass: "label" + 2, //the CSS class for the label labelStyle: { opacity: 1 }, icon: { url: 'http://momentale.com/resources/images/icon/mapPin_2.png', size: new google.maps.Size(32, 29) } }); 

 #map { width: 600px; height: 600px; position: relative; top: 2px; left: 28px; } .label2 { height: 29px; width: 32px; color: white; font-weight: bold; font-family: Tahoma; font-size: 12px; text-align: center; background-image: url('http://momentale.com/resources/images/icon/mapPin_2.png'); } 

 <script src="http://maps.google.com/maps/api/js"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/markerwithlabel/src/markerwithlabel.js"></script> <div id="map"></div> 

工作小提琴