如何在google earth api中显示图块图层？

我正在为非营利协会“诺克斯山公园之友”创建一个互动地图，但我在Google地球视图中遇到了麻烦。如何在google earth api中显示图块图层？

这是项目：http://www.virtualbc.ca/knoxmountain/

，这是关联到谷歌地图的代码代码：

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

var gmarkers = []; 

var iconShadow = new google.maps.MarkerImage('icons/shadow.png', 
     // The shadow image is larger in the horizontal dimension 
     // while the position and offset are the same as for the main image. 
new google.maps.Size(46, 42), 
new google.maps.Point(0,0), 
new google.maps.Point(13, 42)); 

var sites = [ 
['1',49.905305,-119.491191, 37, '<img src="images/parking.jpg" />','parking'], 
['2',49.905842,-119.481927, 36, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['3',49.907366,-119.490439, 35, '<img src="images/shelter.jpg" />','shelter'], 
['4',49.907878,-119.491058, 34, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['5',49.908405,-119.491083, 33, '<img src="images/parking.jpg" />','parking'], 
['6',49.910402,-119.492423, 32, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['7',49.911380,-119.480236, 31, '<img src="images/shelter.jpg" />','shelter'], 
['9',49.911389,-119.480571, 30, '<img src="images/playground.jpg" />','playground'], 
['a',49.911417,-119.485104, 29, '<img src="images/shelter.jpg" />','shelter'], 
['b',49.911578,-119.479905, 28, '<img src="images/parking.jpg" />','parking'], 
['8',49.911656,-119.480227, 27, '<img src="images/picnic.jpg" />','picnic'], 
['c',49.91174271,-119.48507050, 26, '<a href="vtours/apex_trail_shelter/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/apex_point_high.jpg" /></a>','icon'], 
['d',49.911916,-119.485581, 25, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['e',49.912234,-119.485175, 24, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['f',49.912662,-119.485008, 23, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['g',49.91286999,-119.48413424, 22, '<a href="vtours/apex_trail_1/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/apex_point_low.jpg" /></a>','icon'], 
['h',49.913207,-119.482843, 21, '<img src="images/parking.jpg" />','parking'], 
['i',49.914174,-119.472531, 20, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['j',49.914445,-119.482013, 19, '<img src="images/information.jpg" />','information'], 
['k',49.914687,-119.482042, 18, '<img src="images/washroom.jpg" />','washroom'], 
['l',49.914747,-119.482432, 17, '<img src="images/shelter.jpg" />','shelter'], 
['m',49.914814,-119.483070, 16, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['n',49.915162,-119.482393, 15, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['o',49.916277,-119.481530, 14, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['p2',49.919028,-119.479564, 13, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['p',49.919065,-119.478622, 12, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['q',49.91971281,-119.47954356, 11, '<a href="vtours/gordon_trail_1/index.html?iframe=true&width=88%&height=98%" rel="prettyPhoto"><img src="images/gordon_trail_1.jpg" /></a>','icon'], 
['r',49.919778,-119.479044, 10, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['s',49.920243,-119.480118, 9, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['t',49.922075,-119.481165, 8, '<img src="images/viewpoint.jpg" />','viewpoint'], 
['u',49.924514,-119.478223, 7, '<img src="images/swim.jpg" />','swimming'], 
['v',49.924599,-119.477396, 6, '<img src="images/washroom.jpg" />','washroom'], 
['w',49.924867,-119.477636, 5, '<img src="images/picnic.jpg" />','picnic'], 
['x',49.925053,-119.477334, 4, '<img src="images/picnic.jpg" />','picnic'], 
['y',49.925211,-119.476506, 3, '<img src="images/picnic.jpg" />','picnic'], 
['z',49.925446,-119.476789, 2, '<img src="images/swim.jpg" />','swimming'], 
['z2',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>','icon'] 
]; 


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/'+site[5]+'.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"); 
// gmarkers[i].setAnimation(null); 
// gmarkers[i-1].setAnimation(google.maps.Animation.BOUNCE); 
// value = i-1; 
} 

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

的问题：

如何使瓷砖在谷歌可见Earth API？
或如何在Google地球标签中显示KML文件仅限？
有没有什么办法可以在选择Google地球标签时运行代码？

在此先感谢。

来源

2012-06-03 user1428930

有几种方法可以实现您的目标。为了澄清最初的问题，本页面使用GoogleEarth part of the Google Maps v3 Utility Library，所以我的答案将利用其功能。

首先，只有在选择Google地球视图时才可以运行代码。您可以随时通过检查当前的MapTypeId来测试您是否在地球视图中。该实用程序库提供了一个自定义ID，它表明用户正在使用地球视图如果

map.getMapTypeId() === GoogleEarth.MAP_TYPE_ID

这是被动测试。通知用户切换到地球地图类型的任何时候，你可以这样注册事件侦听器：

google.maps.event.addListener(map, 'maptypeid_changed', function() { 
    if (map.getMapTypeId() === GoogleEarth.MAP_TYPE_ID) { 
    // using the Earth plugin, can run custom code 
    } else { 
    // some other map type (roadmap, satellite, etc) 
    } 
});

最后，如果你通过地图添加这些实用程序库仅同步地图和地球之间的KML覆盖API。如果您将KML直接添加到地球插件，则它将在地球插件中显示，而不是在常规地图视图中显示。要做到这一点，你需要实际的插件实例，您可以从实用程序库由

var ge = googleEarth.getInstance();

获得引用（这是使用你的代码中GoogleEarth的是你的工具库创建的实例的名称）。此时，您可以像使用Earth API一样使用该插件。请参阅加载KML的此示例，例如：Fetch Good KML

来源

2012-06-20 20:13:35

如何在google earth api中显示图块图层？

回答

相关问题