为什么与覆盖层放置或V2的边界V3存在偏移差异?

时间:2013-09-29 06:58:40

标签: google-maps google-maps-api-3 overlay offset

我在V2的数据库中有很多(100s)地图。现在迁移到V3并且它们都比以前完全消失了。 我做错了什么吗?或者是否有我必须纠正的错误或差异?我真的不想为新版本重新制作我的所有地图。

在此处查看示例:http://www.trebrown.com/plant_info_temp.php?species=Bismarckia+nobilis+sp.+silver向下滚动页面以查看地图,然后缩小1或2档,然后您将看到印度洋中间的马达加斯加地图。

这是我的代码:

var overlay;
TrebrownOverlay.prototype = new google.maps.OverlayView();
function initialize() {
    var marker;
    var sp_id = "353";
    function createMarker(point,infowindow) {
     var marker = new google.maps.Marker({ position: point, map: map, title:"" });
     google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map,marker);
      });
      return marker;
     }
   var localitiy = new google.maps.LatLng(-19.311144, 46.362305);
   var mapOptions = {
      zoom: 5,
      center: localitiy,
      mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      var swBound = new google.maps.LatLng(-27.371767300523032, 33.1787109375);
      var neBound = new google.maps.LatLng(-10.83330598364249, 59.5458984375);
      var bounds = new google.maps.LatLngBounds(swBound, neBound);
      var srcImage = 'http://www.trebrown.com/images/maps/bismarckia-nobilis.png';
      overlay = new TrebrownOverlay(bounds, srcImage, map);
}
function TrebrownOverlay(bounds, image, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}
TrebrownOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}
TrebrownOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}
TrebrownOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}
google.maps.event.addDomListener(window, 'load', initialize);

1 个答案:

答案 0 :(得分:0)

这是一个CSS问题,与#map-canvas

的父元素的样式有交互

从父text-align: right;

中删除格式div.morespace

或通过为text-align:left

应用样式#map-canvas来覆盖它