0
나는 아주 간단한 javascript/html 코드를 가지고있다. 그리고 div를 "id = mapDiv"로 저장하여지도를 이미지 (jpg 또는 png)로 표시하고 싶습니다. HTML 파일의 루트에 'jquery-1.11.0.js'및 'html2canvas.js'파일이 있습니다. 나는 HTML/Javascript에 익숙하지 않아 사람들이 이전에 게시 한 일부 솔루션을 이해할 수 없습니다. 어떤 도움을 주시면 감사하겠습니다. 감사!html2canvas와의 혼동
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap()
{
var lat1 = document.getElementById("lat1").value;
var lon1 = document.getElementById("lon1").value;
var lat2 = document.getElementById("lat2").value;
var lon2 = document.getElementById("lon2").value;
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"At7RkDItXU6kncQzZa8M9lFfMbzPgmulJYLkhYn5JMMZfHL86lNyFZvGWWngxaAP",
bounds:new Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(lat1, lon1), new Microsoft.Maps.Location(lat2, lon2)),
zoom: 20,
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
disableZooming: true,
showCopyright: false,
showDashboard: false,
enableClickableLogo: false,
});
try
{
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'});
// Construct the layer using the tile source
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: .7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
// Disable mouse click and pan map
Microsoft.Maps.Events.addHandler(map, 'mousedown', function (mouseEvent) {
mouseEvent.handled = true;
});
// Calculating distance between two points
function toRad(Value) {
return Value * Math.PI/180;}
// Calculate vertical distance
var vR = 6371; // km
var vdLat = toRad(lat2-lat1);
var vdLon = toRad(lon1-lon1);
var vrlat1 = toRad(lat1);
var vrlat2 = toRad(lat2);
var va = Math.sin(vdLat/2) * Math.sin(vdLat/2) +
Math.sin(vdLon/2) * Math.sin(vdLon/2) * Math.cos(vrlat1) * Math.cos(vrlat2);
var vc = 2 * Math.atan2(Math.sqrt(va), Math.sqrt(1-va));
var vd = vR * vc;
//Calculate horizontal distance
var hR = 6371; // km
var hdLat = toRad(lat1-lat1);
var hdLon = toRad(lon2-lon1);
var hrlat1 = toRad(lat1);
var hrlat2 = toRad(lat1);
var ha = Math.sin(hdLat/2) * Math.sin(hdLat/2) +
Math.sin(hdLon/2) * Math.sin(hdLon/2) * Math.cos(hrlat1) * Math.cos(hrlat2);
var hc = 2 * Math.atan2(Math.sqrt(ha), Math.sqrt(1-ha));
var hd = hR * hc;
alert(' Horizontal Distance = ' + hd + '\n Vertical Distance = ' + vd);
}
catch(err)
{
alert('Error Message:' + err.message);
}
}
</script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $('div');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
var myImage = canvas.toDataURL("image\png");
window.open(myImage);
//alert(data);
//data is the Base64-encoded image
}
});
});
</script>
</head>
<body onload="GetMap();">
<body bgcolor="#9FB6CD">
<center>
<h1>Enter Coordinates</h1>
</br>
<h3>Input points</h3>
Coordinate1 (upper-left):
</br>
latitude 1: <input type="text" id="lat1" value="55"><br>
Longitude 1: <input type="text" id="lon1" value="135"><br>
Coordinate 2 (lower-right):
</br>
latitude 2: <input type="text" id="lat2" value="54.98"><br>
Longitude 2: <input type="text" id="lon2"value="135.02"><br>
<input type="submit" value="submit" onclick="GetMap()">
<div id='mapDiv' typename="mapDiv" style="position:relative; width:500px; height:500px;"></div>
<script>
$('#mapDiv div.mapDiv').trigger($.event('click'));
</script>
</center>
</body>
</html>