在Google Map Api上显示经度和纬度

Question

我想在使用Google Maps api创建的Java脚本代码上显示纬度和经度线/网格，但是我无法显示确切的纬度和经度位置。 我尝试使用覆盖地图类型，该类型显示像素网格，但不显示经纬度网格

https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay ，这就是我使用的

Answer 1

从overlayMapType示例开始，您可以基于图块坐标计算图块左上角的Point，然后通过map-projection的fromPointToLatLng方法将此点转换为LatLng：

 function initialize() { var map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 17, center: new google.maps.LatLng(52.549878, 13.425209) }); function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var f = Math.pow(2, zoom), t = this.tileSize, w = t.width, h = t.height, n = ownerDocument.createElement('div'), //calculate the point of the top-left tile-corner p = new google.maps.Point( ((w * (coord.x / f)) + w) % w, ((h * (coord.y / f)) + h) % h ); //dont draw redundant tiles if (coord.y < 0 || coord.y >= f) return n; //print coordinates n.innerHTML = '<span>' + map.getProjection().fromPointToLatLng(p).toUrlValue() + '</span>'; n.style.width = w + 'px'; n.style.height = h + 'px'; n.className = 'tile'; return n; }; map.overlayMapTypes.insertAt( 0, new CoordMapType(new google.maps.Size(256, 256))); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } .tile { border: 1px solid #aaa; } .tile span { background: #fff; font: 12px Monospace; } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map-canvas"></div> 

Answer 2

也许这个库是您想要的？

https://github.com/alexcheng1982/google-maps-gridlines