1
비영리 단체 "Friends of Knox Mountain Park"에 대한 대화식지도를 만들고 있지만 Google 어스보기에 문제가 있습니다. Google 어스 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?
또는 KML 파일을 표시하는 방법 만 Google 어스 탭에 표시 하시겠습니까?
Google 어스 탭을 선택한 경우에만 코드를 실행할 수있는 방법이 있습니까?
미리 감사드립니다.