Question

我正在为非营利协会“诺克斯山公园之友”创建互动地图，但我在使用谷歌地球视图时遇到了麻烦。

我已经在网上搜索了好几个星期，我找到的解决方案都没有对我有用。有人可以看看代码，让我知道我应该怎么做才能在地图中包含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);

Answer 1

我注意到您网站的第一个问题是您链接到不存在的http://www.virtualbc.ca/src/googleearth-compiled.js。

将Google地球视图集成/添加到我的地图

1 个答案: