Google Maps（JS）开发入门(3)：显示某点的经纬度、世界坐标、像素坐标、图块Tile坐标

在之前的一系列文章中，我介绍了关于Google Maps的坐标系统和地图投影。本文介绍一种Google Maps官方的方法，根据经纬度求出一点的世界坐标、像素坐标、图块Tile坐标。

效果图

核心JS代码

var map;
var TILE_SIZE = 256;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
function bound(value, opt_min, opt_max) {

if (opt_min != null) value = Math.max(value, opt_min);

if (opt_max != null) value = Math.min(value, opt_max);

return value;

}
function degreesToRadians(deg) {

return deg * (Math.PI / 180);

}
function radiansToDegrees(rad) {

return rad / (Math.PI / 180);

}
/** @constructor */

function MercatorProjection() {

this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,

TILE_SIZE / 2);

this.pixelsPerLonDegree_ = TILE_SIZE / 360;

this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);

}
MercatorProjection.prototype.fromLatLngToPoint = function(latLng,

opt_point) {

var me = this;

var point = opt_point || new google.maps.Point(0, 0);

var origin = me.pixelOrigin_;
point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
// Truncating to 0.9999 effectively limits latitude to 89.189. This is

// about a third of a tile past the edge of the world tile.

var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,

0.9999);

point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
-me.pixelsPerLonRadian_;

return point;

};
MercatorProjection.prototype.fromPointToLatLng = function(point) {

var me = this;

var origin = me.pixelOrigin_;

var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;

var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;

var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) -

Math.PI / 2);

return new google.maps.LatLng(lat, lng);

};
function createInfoWindowContent() {

var numTiles = 1 << map.getZoom();

var projection = new MercatorProjection();

var worldCoordinate = projection.fromLatLngToPoint(chicago);

var pixelCoordinate = new google.maps.Point(

worldCoordinate.x * numTiles,

worldCoordinate.y * numTiles);

var tileCoordinate = new google.maps.Point(

Math.floor(pixelCoordinate.x / TILE_SIZE),

Math.floor(pixelCoordinate.y / TILE_SIZE));
return [

'芝加哥, IL',

'经纬度: ' + chicago.lat() + ' , ' + chicago.lng(),

'世界坐标: ' + worldCoordinate.x + ' , ' +

worldCoordinate.y,

'像素坐标: ' + Math.floor(pixelCoordinate.x) + ' , ' +

Math.floor(pixelCoordinate.y),

'图块坐标: ' + tileCoordinate.x + ' , ' +

tileCoordinate.y + ' 缩放等级: ' + map.getZoom()

].join('
');

}
function initialize() {

var mapOptions = {

zoom: 3,

center: chicago

};
map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);
var coordInfoWindow = new google.maps.InfoWindow();

coordInfoWindow.setContent(createInfoWindowContent());

coordInfoWindow.setPosition(chicago);

coordInfoWindow.open(map);
google.maps.event.addListener(map, 'zoom_changed', function() {

coordInfoWindow.setContent(createInfoWindowContent());

coordInfoWindow.open(map);

});

}
google.maps.event.addDomListener(window, 'load', initialize);

在线预览

后话

本文的代码，小编也没有理解，只是做为一个示例，可以直接使用，还请大神指教。