javascript - 标记 GoogleMaps Lat/Lng 交叉点-6ren

javascript - 标记 GoogleMaps Lat/Lng 交叉点

转载作者：行者123 更新时间：2023-12-03 09:19:24

我创建了一张 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&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)
                }
          }));
      }
    }

关于javascript - 标记 GoogleMaps Lat/Lng 交叉点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31881097/

文章推荐： javascript - Console.log = null 对于我手动设置的值

文章推荐： api - REST API 模式的替代方案

graph - 如何优化graphviz中的布局以删除不必要的边缘交叉点(交叉点)？
我正在准备数据库关系的自动文档。该工具是graphviz。我的问题是输出图像上节点的放置不是最佳的，并且有许多不必要的边缘交叉。是否有任何方法可以执行图形的优化，以便结果将具有最小边交叉(交叉)？
geometry - 圆-矩形碰撞检测(交叉点)
如何判断圆和矩形在二维欧几里得空间中是否相交？ (即经典的二维几何) 最佳答案这是我的做法: bool intersects(CircleType circle, RectType rect) {
javascript - Aframe 射线转换器交叉点
切换到 Aframe 的主版本后，光线转换器相交事件似乎变为空，尽管我保留了完全相同的代码: 使用注册组件: AFRAME.registerComponent('collider-check', {
algorithm - 交叉点 : Strassen's Algorithm
就效率而言，Strassen 算法应该停止递归并应用乘法的最佳交叉点是多少？我知道这与具体的实现和硬件密切相关，但对于一般情况应该有某种指南或某人的一些实验结果。在网上搜索了一下，问了一些他们认为
jquery - CSS 多重选择器(交叉点)不工作
我正在尝试使用 jquery 来切换某些类的显示属性(打开和关闭)。我正在尝试在图像和下面的文本之间切换，以在点击时切换 Charity Run
javascript - 标记 GoogleMaps Lat/Lng 交叉点
我创建了一张 map ，其中每 1/4 分钟绘制一次纬度和经度线。生成的框称为“刻钟分钟”。我需要给每个刻钟框贴上标签。标签应该是盒子内西南 Angular 的纬度/经度。由于我先绘制可视区域内的所有
c# - 简单的 3D AABB-Line Segment 碰撞检测(交叉点)
我只需要一种方法来告诉我轴对齐的 3D 边界框是否与线段(不是射线)相交。我不需要交点。盒子由两个对角定义，线段由起点和终点定义，如下所示: Boolean intersection(Vector3

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 标记 GoogleMaps Lat/Lng 交叉点