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

Question

我想在我使用 google maps api 创建的 java 脚本代码上显示纬度和经度线/网格，但我无法显示确切的纬度和经度位置。我尝试使用显示像素网格但不显示纬度和经度网格的叠加地图类型

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

Answer 1

从overlayMapType-example开始，您可以根据瓦片坐标计算瓦片左上角的点，并通过地图投影的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