2012-05-31 67 views
0

我正在爲非營利協會「諾克斯山脈公園之友」創建交互式地圖,但我在Google地球視圖中遇到了麻煩。將Google地球視圖集成/添加到我的地圖

我一直在網上搜索了幾個星期,沒有找到適合我的解決方案。有人可以看看代碼並讓我知道我應該怎麼做才能將Google地球視圖包含在地圖中?提前致謝。

在線項目:http://www.virtualbc.ca/knoxmountain/

這是JavaScript文件(mapa2.js)包含谷歌地圖的代碼:

google.load('earth', '1'); 
var map; 
var googleEarth; 

var gmarkers = []; 

var iconShadow = new google.maps.MarkerImage('icons/shadow.png', 
new google.maps.Size(46, 42), 
new google.maps.Point(0,0), 
new google.maps.Point(13, 42)); 

var sites = [ 
['Apex Trail - Shelter',49.91174271, -119.48507050, 4, '<a href="vtours/apex_trail_shelter/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/apex_point_high.jpg"></a>','magenta','14'], 
['Apex Trail',49.91286999, -119.48413424, 3, '<a href="vtours/apex_trail_1/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/apex_point_low.jpg"></a>','lemon','1'], 
['Gordon Trail',49.91971281, -119.47954356, 2, '<a href="vtours/gordon_trail_1/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/apex_point_low.jpg"></a>','lemon','1'], 
['Paul Tomb Bay',49.92555541, -119.47710250, 1, '<a href="vtours/paul_tomb_bay_1/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/tomb_bay.jpg"></a>','lemon','1'] 
]; 


var infowindow = null; 

var overlay; 

// Used to make Google Map quard coords to MapCruncher/BingMaps quard coords  
function TileToQuadKey (x, y, zoom) 
{ 
    var quad = ""; 
    for (var i = zoom; i > 0; i--) 
    { 
     var mask = 1 << (i - 1); 
     var cell = 0; 
     if ((x & mask) != 0) 
      cell++; 
     if ((y & mask) != 0) 
      cell += 2; 
     quad += cell; 
    } 
    return quad; 
} 

function init() { 
    var centerMap = new google.maps.LatLng(49.909671, -119.482241); 

    var myOptions = { 
     zoom: 10, 
     center: centerMap, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     // Create the tile layers  

    // ASTER Tile Layer 
    myASTEROptions = { 
    getTileUrl : function (a,b) { 
return "http://www.virtualbc.ca/knoxmountain/map/" + TileToQuadKey(a.x,a.y,b) + ".png"; 
}, 
    isPng: true, 
    opacity: 1.0, 
    tileSize: new google.maps.Size(256,256), 
    name: "ASTER", 
    minZoom:13, 
    maxZoom:20 
    } 

    ASTERMapType = new google.maps.ImageMapType(myASTEROptions); 
    map.overlayMapTypes.insertAt(0, ASTERMapType); 

    // Aerial Tile Layer 
    myAerialOptions = { 
    getTileUrl : function (a,b) { 
return "http://www.virtualbc.ca/knoxmountain/map/" + TileToQuadKey(a.x,a.y,b) + ".png"; 
}, 
    isPng: true, 
    opacity: 1.0, 
    tileSize: new google.maps.Size(256,256), 
    name: "Aerial", 
    minZoom:15, 
    maxZoom:21 
    } 

    AerialMapType = new google.maps.ImageMapType(myAerialOptions); 
    map.overlayMapTypes.insertAt(1, AerialMapType); 

    var panorama = new google.maps.StreetViewPanorama(map.getDiv()); 
    panorama.setVisible(false); 
    panorama.set('enableCloseButton', true); 
    map.setStreetView(panorama); 
    panorama.setPosition(centerMap); 

    setMarkers(map, sites);  
    setZoom(map, sites); 

    infowindow = new google.maps.InfoWindow({ 
     content: "Loading..." 
    }); 

    googleEarth = new GoogleEarth(map); 

    google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays); 

} 

/* 
This functions sets the markers (array) 
*/ 
function setMarkers(map, markers) { 
    for (var i = 0; i < markers.length; i++) { 
     var site = markers[i]; 
     var siteLatLng = new google.maps.LatLng(site[1], site[2]); 

     var marker = new google.maps.Marker({ 
      position: siteLatLng, 
      map: map, 
      title: site[0], 
      zIndex: site[3], 
      html: site[4], 
      // Markers drop on the map 
      animation: google.maps.Animation.DROP, 
      icon: 'http://www.virtualbc.ca/knoxmountain/icons/icon.png', 
      shadow: iconShadow 
     }); 

     gmarkers.push(marker); 

     google.maps.event.addListener(marker, "click", function() { 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 
    } 
} 

/* 
Set the zoom to fit comfortably all the markers in the map 
*/ 
function setZoom(map, markers) { 
    var boundbox = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) 
    { 
     boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2])); 
    } 
    map.setCenter(boundbox.getCenter()); 
    map.fitBounds(boundbox); 
} 

// This function picks up the click and opens the corresponding info window 

function myclick(i) { 
    google.maps.event.trigger(gmarkers[i-1], "click"); 
} 

google.maps.event.addDomListener(window, 'load', init); 

回答

相關問題