Question

我创建了Google地图叠加层，但由于某种原因，地图左上角的缩放滑块已停止工作。一直试图挑选代码来修复它，但似乎无法找到破碎的东西。有人可以看看我错过了什么吗？

http://www.ucl.ac.uk/study/virtualtours/

我的代码在这里：

<script type="text/javascript"> 

google.load("maps", "2"); 
google.load("jquery", "1.4.2");  

var map;
var camera;
var side_bar_html = "";
var gmarkers = [];

function TileToQuadKey ( tx,  ty,  zl){
  var quad = "";
  for (var i = zl; i > 0; i--) {
    var mask = 1 << (i - 1);
    var cell = 0;
    if ((tx & mask) != 0) cell++;
if ((ty & mask) != 0) cell += 2;
quad += cell;
  }
  return quad;
}

var uclvtTiles = function (a,b) {               
  var f = "http://www.ucl.ac.uk/prosp-students/access/virtual-tour/tourlayers/" + TileToQuadKey(a.x,a.y,b) + ".png";
  return f;
}

function createUclVTSatMapType() {
  var uclvtHybridLayer = new Array();
  uclvtHybridLayer[0] = G_NORMAL_MAP.getTileLayers()[0];
  uclvtHybridLayer[1] = new GTileLayer(new GCopyrightCollection('') , 17, 17);
  uclvtHybridLayer[1].getTileUrl = uclvtTiles;
  uclvtHybridLayer[1].getCopyright = function(a,b) {return "University College London, 2010";};
  uclvtHybridLayer[1].getOpacity = function () {return 0.97;};//opacity of the non transparent part
  if(navigator.userAgent.indexOf("MSIE") == -1) {
    uclvtHybridLayer[1].isPng = function() {return true;};
  }

  var uclvtSatMap = new GMapType(
      uclvtHybridLayer,
      G_NORMAL_MAP.getProjection(), 
      'UCL Map', 
      {errorMessage:"", alt:"Show imagery with UCL Map"});

  uclvtSatMap.getTextColor = function() {return "#000000";};
  return uclvtSatMap;
}

function myclick(i) {
  GEvent.trigger(gmarkers[i], 'click');
}

function addMarker(point, title, video, details) {
  var marker = new GMarker(point, {title: title, icon:camera});
  GEvent.addListener(marker, "click", function() {
    if (details) {
      marker.openInfoWindowTabsHtml([new GInfoWindowTab("Video", video),
                                     new GInfoWindowTab("More", details)]);
    } else {
      marker.openInfoWindowHtml(video);
    }
  });

  var id = gmarkers.length;
  gmarkers.push(marker);
  map.addOverlay(marker);

  return id;
}

function flashMovieHTML(title, file) {
  return '<div style="width:335px; height:260px">' + 
           '<b>' + title + '</b>' +
           '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="325" height="244" ' + 
                   'id="'    + title + '" ' + 
                   'title="' + title + '">' + 
               '<param name="movie"      value="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" />' +
               '<param name="quality"    value="high" />' + 
               '<param name="wmode"      value="opaque" />' + 
               '<param name="swfversion" value="8.0.35.0" />' + 
               '<embed src="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" ' +
                   'quality="high" ' + 
                   'width="325" ' +
                   'height="244" ' +
                   'name="' + title + '" ' +
                   'type="application/x-shockwave-flash" ' + 
                   'pluginspage="http://www.macromedia.com/go/getflashplayer">' +
               '</embed>' + 
           '</object>' + 
        '</div>';
}

function addMarkersToMap() {
  GDownloadUrl('campus.xml', function(doc) {
    var xmlDoc = GXml.parse(doc);
    var locations = xmlDoc.documentElement.getElementsByTagName("location");

    var currentCategory = ""; 
    for (var i = 0; i < locations.length; i++) {
      var lat      = parseFloat(locations[i].getAttribute("lat"));
      var lng      = parseFloat(locations[i].getAttribute("lng"));
      var point    = new GLatLng(lat,lng);
      var title    = locations[i].getAttribute("title");
      var menu     = locations[i].getAttribute("menu");
      var video    = locations[i].getAttribute("video");
      var category = locations[i].getAttribute("category");
      var details  = locations[i].childNodes.length == 0 ? null : 
                     '<div style="width:335px; height:260px">' + 
                       locations[i].childNodes[0].nodeValue +
                     '</div>';

      var id = addMarker(point, title, flashMovieHTML(title, video), details);

      if (category != currentCategory) {
        if (id > 0) {
          side_bar_html += '</ul></div></div>';
        }
        side_bar_html += '<div class="collapsable">';
        side_bar_html += '<h4 class="toggleCollapsableContent">' + category + '</h4>';
        side_bar_html += '<div class="collapsableContent"><ul>';
      }
      side_bar_html += '<li><a href="javascript:myclick(' + id + ')">' + menu + '<\/a></li>';
      currentCategory = category;
    }
    side_bar_html += '</ul></div></div>';
    document.getElementById("right").innerHTML = side_bar_html;

$（ “h4.toggleCollapsableContent：GT（0）”） .addClass（ '封闭'）的.next（ 'collapsableContent。'）隐藏（）;

    $("h4.toggleCollapsableContent").click(function () {
      if ($(this).next($(".collapsableContent")).is(":hidden")) {
        $(this).next($(".collapsableContent")).slideDown("fast");
        $(this).removeClass("closed"); 
      } else {
        $(this).next($(".collapsableContent")).slideUp("fast");
        $(this).addClass("closed");
      }
    });
  });
}


function initialize() { 
  if (GBrowserIsCompatible()) { 
    map = new GMap2(document.getElementById("mapDiv")); 
    map.setCenter(new GLatLng(51.52484592590448, -0.13345599174499512), 17); 
    map.setUIToDefault(); 

    var uclvtSatMapType = createUclVTSatMapType()
    map.addMapType(uclvtSatMapType);
    map.setMapType(uclvtSatMapType);

    camera = new GIcon(G_DEFAULT_ICON);
    camera.image = "ucl-video.png";
    camera.iconSize         = new GSize(32,37);
    camera.iconAnchor       = new GPoint(16,35);
    camera.infoWindowAnchor = new GPoint(16,2);
    addMarkersToMap();
  } 
} 

google.setOnLoadCallback(initialize);

干杯，

Answer 1

包含此图片的div

http://www.ucl.ac.uk/prosp-students/access/virtual-tour/campus-map-key.png

位于地图的正上方，阻止访问其下方的所有内容。

Answer 2

这可能会对您有所帮助：

#map img{max-width: inherit;}

谷歌地图缩放了

2 个答案: