javascript - MarkerWithLabel 缩放时移动

Question

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

谢谢。

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

为图标设置正确的 anchor 。您正在以非标准方式使用它。这对我有用:

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>

working fiddle