在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