我创建了一张 map ，其中每 1/4 分钟绘制一次纬度和经度线。生成的框称为“刻钟分钟”。我需要给每个刻钟框贴上标签。标签应该是盒子内西南 Angular 的纬度/经度。由于我先绘制可视区域内的所有纬线，然后再绘制所有经线，所以我不知道如何找到交点。看起来，我会绘制一(1)条纬度线，然后绘制一(1)条经度线，然后标记相交。我想我可以在每个点使用一个信息框。
我不知道如何在 JavaScript 中执行此操作。也许没有必要在创建时捕获交叉点，但这是我认为它会发生的唯一方法。
The syntax for a QtrMin is
3040A8415A = intersect at 30 40' by 84 15'
3040A8415B = intersect at 30 40' by 84 15' 15"
3040A8415C = intersect at 30 40' by 84 15' 30"
3040A8415D = intersect at 30 40' by 84 15' 45"
or DDMM and A-> D to designate each quarter of minute.
Longitude and latitude are treated the same.
我拥有的是:
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
<title>Find your Qtr minute locator</title>
</head>
<body style="height:100%;margin:0">
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var map;
var llOffset = 0.0666666666666667;
var drawGridBox = false;
var gridOverBox = new google.maps.Polyline({
path: [],
geodesic: true,
strokeColor: '',
strokeOpacity: 0,
strokeWeight: 0
});
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var smLngPolylines = [];
var lngLabels = [];
var lngMapLabel;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(34.00, -84.00),
zoom: 10,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
});
DrawGridOn();
google.maps.event.addListener(map, 'idle', function () {
createGridLines(map.getBounds());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function DrawGridOn() {
drawGridBox = true;
}
function DrawGridOff() {
drawGridBox = false;
}
function createGridLines(bounds) {
for (var i = 0; i < latPolylines.length; i++) {
latPolylines[i].setMap(null);
}
latPolylines = [];
for (var i = 0; i < lngPolylines.length; i++) {
lngPolylines[i].setMap(null);
}
lngPolylines = [];
if (map.getZoom() < 10) return;
var north = bounds.getNorthEast().lat();
var east = bounds.getNorthEast().lng();
var south = bounds.getSouthWest().lat();
var west = bounds.getSouthWest().lng();
// define the size of the grid
var topLat = Math.ceil(north / llOffset) * llOffset;
var rightLong = Math.ceil(east / llOffset) * llOffset;
var bottomLat = Math.floor(south / llOffset) * llOffset;
var leftLong = Math.floor(west / llOffset) * llOffset;
for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
</script>
</body>
</html>
最佳答案
也许没有必要在创建时捕获交集，但这是我认为会发生的唯一方法
您绘制具有相同纬度或经度的直线，因此您可以假设两条线的交点:
latLine a: ay1,ax1 ay1,ax2
lngLine b: by1,bx1 by2,bx1
...是ay1,bx1
创建线条后，迭代它们并根据纬度/经度创建标签:
//put the next 4 lines to the top of createGridLines
for(var i=0;i<lngLabels.length;++i){
lngLabels[i].setMap(null);
}
lngLabels=[];
//put this at the end of createGridLines
for(var x=0;x<latPolylines.length;++x){
for(var y=0;y<lngPolylines.length-1;++y){
var latLng=new google.maps.LatLng(latPolylines[x].getPath().getAt(0).lat(),
lngPolylines[y].getPath().getAt(0).lng());
lngLabels.push(new google.maps.Marker({
map:map,
position:latLng,
icon:{ url:'https://chart.googleapis.com/chart?'
+'chst=d_bubble_text_small&chld=bb|'
+ latLng.toUrlValue()
+'|FFFFFF|000000',
anchor:new google.maps.Point(0,42)
}
}));
}
}
关于javascript - 标记 GoogleMaps Lat/Lng 交叉点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31881097/