map-coordinates.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
  6. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
  7. <!-- build:js scripts/ng-map.min.js -->
  8. <script src="../app/scripts/app.js"></script>
  9. <script src="../app/scripts/directives/map_controller.js"></script>
  10. <script src="../app/scripts/directives/map.js"></script>
  11. <script src="../app/scripts/directives/marker.js"></script>
  12. <script src="../app/scripts/directives/shape.js"></script>
  13. <script src="../app/scripts/directives/info-window.js"></script>
  14. <script src="../app/scripts/services/geo_coder.js"></script>
  15. <script src="../app/scripts/services/navigator_geolocation.js"></script>
  16. <script src="../app/scripts/services/attr2_options.js"></script>
  17. <!-- endbuild -->
  18. <script>
  19. var app = angular.module('myApp', ['ngMap']);
  20. app.controller('BasicCtrl1', function($scope, $compile) {
  21. var TILE_SIZE = 256;
  22. function bound(value, opt_min, opt_max) {
  23. if (opt_min != null) value = Math.max(value, opt_min);
  24. if (opt_max != null) value = Math.min(value, opt_max);
  25. return value;
  26. }
  27. function degreesToRadians(deg) {
  28. return deg * (Math.PI / 180);
  29. }
  30. function radiansToDegrees(rad) {
  31. return rad / (Math.PI / 180);
  32. }
  33. function MercatorProjection() {
  34. this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
  35. this.pixelsPerLonDegree_ = TILE_SIZE / 360;
  36. this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
  37. }
  38. MercatorProjection.prototype.fromLatLngToPoint = function(latLng,
  39. opt_point) {
  40. var me = this;
  41. var point = opt_point || new google.maps.Point(0, 0);
  42. var origin = me.pixelOrigin_;
  43. point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
  44. // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  45. // about a third of a tile past the edge of the world tile.
  46. var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,
  47. 0.9999);
  48. point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
  49. -me.pixelsPerLonRadian_;
  50. return point;
  51. };
  52. MercatorProjection.prototype.fromPointToLatLng = function(point) {
  53. var me = this;
  54. var origin = me.pixelOrigin_;
  55. var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
  56. var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
  57. var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) -
  58. Math.PI / 2);
  59. return new google.maps.LatLng(lat, lng);
  60. };
  61. $scope.$on('mapInitialized', function(event, map) {
  62. var numTiles = 1 << map.getZoom();
  63. var projection = new MercatorProjection();
  64. $scope.chicago = map.getCenter();
  65. $scope.map = map;
  66. $scope.worldCoordinate = projection.fromLatLngToPoint($scope.chicago);
  67. $scope.pixelCoordinate = new google.maps.Point(
  68. $scope.worldCoordinate.x * numTiles,
  69. $scope.worldCoordinate.y * numTiles);
  70. $scope.tileCoordinate = new google.maps.Point(
  71. Math.floor($scope.pixelCoordinate.x / TILE_SIZE),
  72. Math.floor($scope.pixelCoordinate.y / TILE_SIZE));
  73. });
  74. });
  75. </script>
  76. </head>
  77. <body>
  78. <div ng-controller="BasicCtrl1">
  79. Showing static coordinates of Chicago
  80. <br/>
  81. <map center="41.850033,-87.6500523" zoom="3">
  82. <info-window id="1" position="41.850033,-87.6500523" visible="true">
  83. <div ng-non-bindable>
  84. Chicago, IL<br/>
  85. LatLng: {{chicago.lat()}}, {{chicago.lng()}}, <br/>
  86. World Coordinate: {{worldCoordinate.x}}, {{worldCoordinate.y}}, <br/>
  87. Pixel Coordinate: {{pixelCoordinate.x}}, {{pixelCoordinate.y}}, <br/>
  88. Tile Coordinate: {{tileCoordinate.x}}, {{tileCoordinate.y}} at Zoom Level {{map.getZoom()}}
  89. </div>
  90. </info-window>
  91. </map>
  92. </div>
  93. </body>
  94. </html>