Код: Выделить всё
<!DOCTYPE html>
<html >
<head >
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"
type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>"
type="text/javascript"></script>
<title>Index</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas
{
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
// Эвклидова Проекция
var EuclideanProjection = function () {
// Ширина, она же высота одного кусочка картинки
var EUCLIDEAN_RANGE = 256;
// Центр этой самой картинки
this.pixelOrigin = new google.maps.Point(EUCLIDEAN_RANGE / 2, EUCLIDEAN_RANGE / 2);
// Количество градусов в одном пикселе картинки
this.pixelsPerLonDegree = EUCLIDEAN_RANGE / 360;
// Количество радиан в одном пикселе картинки
this.pixelsPerLonRadian = EUCLIDEAN_RANGE / (2 * Math.PI);
};
// Эти два метода надо реализовать в классе проекции
// http://code.google.com/apis/maps/documentation/javascript/maptypes.html#Projections
EuclideanProjection.prototype = {
pixelOrigin: new google.maps.Point(0, 0),
pixelsPerLonDegree: 0,
pixelsPerLonRadian: 0,
// код взят из
// http://library.ucf.edu/Web/JS/Maps.js
// в работе можно глянуть тут
// http://library.ucf.edu/Administration/Maps/
// страна должна знать героев в лицо
fromLatLngToPoint: function (latLng, opt_point) {
var point = opt_point || new google.maps.Point(0, 0);
point.x = this.pixelOrigin.x + latLng.lng() * this.pixelsPerLonDegree;
point.y = this.pixelOrigin.y + (-1 * latLng.lat()) * this.pixelsPerLonDegree;
//console.log("fromLatLngToPoint", latLng, point);
return point;
},
fromPointToLatLng: function (point) {
var lng = (point.x - this.pixelOrigin.x) / this.pixelsPerLonDegree,
lat = -1 * (point.y - this.pixelOrigin.y) / this.pixelsPerLonDegree;
//console.log("fromPointToLatLng", point, new google.maps.LatLng(lat , lng, true));
return new google.maps.LatLng(lat, lng, true);
}
};
var imageOptions = {
getTileUrl: function (coord, zoom) {
return "files/files/" + zoom + ' ' + coord.x + ' ' + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
};
var imageMap = new google.maps.ImageMapType(imageOptions);
imageMap.projection = new EuclideanProjection();
imageMap.name = "webmap";
imageMap.minZoom = 1;
imageMap.maxZoom = 12;
var mapOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeControlOptions: {
mapTypeIds: []
},
backgroundColor: 'black'
};
//в эту функцию передаем координаты тайла и zoom и и она показывает нужный тайл(номер тайла переводится в координаты карты по x и по y)
function goToRightTile(x,y,zoom) {
mapOptions.zoom = zoom;
var x1 = 255;
var y1 = 255;
x1 *= x / Math.pow(2, zoom);
y1 *= y / Math.pow(2, zoom);
//var t = imageMap.projection.fromPointToLatLng(0, 0);
var EUCLIDEAN_RANGE = imageMap.projection.EUCLIADEN_RANGE;
// Центр этой самой картинки
var pixelOrigin = imageMap.projection.pixelOrigin;
// Количество градусов в одном пикселе картинки
var pixelsPerLonDegree = imageMap.projection.pixelsPerLonDegree;
// Количество радиан в одном пикселе картинки
this.pixelsPerLonRadian = imageMap.projection.pixelsPerLonRadian;
var lng = (x1 - pixelOrigin.x) / pixelsPerLonDegree;
var lat = -1 * (y1 - pixelOrigin.y) / pixelsPerLonDegree;
mapOptions.center = new google.maps.LatLng(lat,lng,true);
initialize();
};
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('webmap', imageMap);
map.setMapTypeId('webmap');
}
</script>
</head>
<body onload="initialize()">
<input type="button" id="getPeople" value="Get People" onclick ="my_click()" />
<% using(Ajax.BeginForm("UpdateForm",null)) { %>
<%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Submit"/><br />
<% } %>
<div id="map_canvas" style="width: 80%; height: 100%; margin:0 auto;">
</div>
</body>
</html>