标记GoogleMaps纬度/经度交点_JavaScript

我创建了一个地图，每1/4分钟绘制一次纬度和经度线。 结果框称为“四分之一分钟”。 我需要在每个“四分之一分钟”框中贴上标签。 标签应为包装盒内SW角的纬度/经度。 由于我先绘制了视图区域内的所有纬度线，然后绘制了所有经度线，所以我不知道如何找到相交点。 看来，我会先画一个（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&amp;libraries=geometry&amp;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)
                }
          }));
      }
    }

标记GoogleMaps纬度/经度交点

问题描述

1楼