我想在使用谷歌地图 api 创建的 java 脚本代码上显示纬度和经度线/网格,但我无法显示确切的纬度和经度位置。我尝试使用显示像素网格但不显示纬度和经度网格的叠加地图类型
https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay这就是我用的
从 overlayMapType 示例开始,您可以根据图块坐标计算图块左上角的点,并通过地图投影的 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>
也许这个图书馆能满足你的需求。
https://github.com/alexcheng1982/google-maps-gridlines