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

javascript - 标记 GoogleMaps Lat/Lng 交叉点

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

25

4

我创建了一张 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/

25

4

0

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

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

mysql - lat long 范围内的 SQL lat longs
我正在使用 MySQL 5.5.52。缩写:Lat = 纬度，Long = 经度，NE = 东北，SW = 西南。我有两个 SQL 表: 第一个表包含“区域”。每个区域由 ID、NE Lat、NE
php - 将 lat/lng 与另一个 lat/lng 进行比较
这个问题在这里已经有了答案: Measuring the distance between two coordinates in PHP (13 个答案) 关闭 9 年前。我在数据库中存储了 fi
python - lat/lon to utm to lat/lon 是非常有缺陷的，怎么来的？
我试过以下方法，输入:纬度/经度数据然后我会计算它周围的一个方框，比方说 50 米，所以东距/北距值 +/- 50 米。现在我将它重新转换为纬度/经度并使用脚本: http://robotics.a
javascript - 事件 lat/lng 不匹配 AJAX 成功数据 lat/lng
我想在 Google map 标记完成拖动时检索正确的 lat/lng。但是对于同一个精确点，它给出了两个不同的(非常近似)坐标。同一掉落的示例结果: evt.latLng:39.82213542
javascript - proj4 lat/lon 到 UTM 并返回 lat/lon
我正在使用 proj4 将纬度/对数坐标投影到 UTM。但我无法从 UTM 投影回 lat/log。对于以下示例，我希望代码返回给定的经纬度/对数 [48.37966, 2.504635]。相反，它返
mysql - 如果 lat/lng 为空，则应将什么放入 lat/lng 数据库字段中？
我有一个 mysql 插入语句，当系统无法获取用户的纬度/经度时，该语句会中断。sql 是这样的: INSERT INTO users(user_email, first_name , last_na
javascript - 隐藏的 'lat' 和 'lng' 字段未删除，因此我的脚本仍在从不正确的地理位置搜索 lat 和 lng 结果
我有一个页面，用户可以在“邮政编码”字段中输入他们的地址。我还有一个“检测位置”按钮，可以对用户地址进行地理定位。当他们单击此按钮时，他们的城市名称和邮政编码将回显到“邮政编码”字段中，并且纬度和经度
javascript - 无法读取未定义的属性 'results' - var lat = data.results[0].geometry.location.lat;
添加位置并按回车键时出现错误 var lat = data.results[0].geometry.location.lat; 类型错误:无法读取未定义的属性“结果” 有时它会给出 cannot re
PHP/SQL 使用一个 SELECT 语句从多个其他 lat/lng 位置获取所有 lat/lng 位置
我有两个表:一个 map 表，其中包含大约 3,000 个纬度/经度对，代表现实世界的“标记”位置；还有一个建筑物表，其中有数百个纬度/经度对，也代表真实世界的建筑物位置。我想做的是获取所有建筑物可见
ruby-on-rails - 在 Ruby 中计算大量 Lat/Lngs 到一组 2000 Lat/Lngs
我正在尝试找到解决以下问题的最佳方法: 问题我在集合 A 中有(最多)100,000 个纬度/经度点我在 B 组中有(最多)2000 个纬度/经度点我需要找到集合 B 中的点与集合 A 中的点最近
c# - 圆和线段相交检测(Lat Lon Point、Meter Radius 和 Lat Long Line)
我有一个圆圈，它实际上是一个以米为单位的半径的 latlon 位置。我还有一条道路 A-B 定义为两个经纬度位置。我如何找到那条路是否在圆圈内交叉。如果没有将 latlon 位置投影到 xy 位置是否
google-maps - 给定一个 lat/lng 坐标，计算 10 公里区域的最小和最大 lat/lng 值
假设我有一个 lat lng 坐标，我想把它放在一个 10 公里宽的正方形的中心，然后得到最小的 lat/lng 和最大的 lat/lng。有没有一种简单的方法可以做到这一点已经存在？最佳答案如
java - 如何在 JTS 中将 jts.geom.Geometry 对象的坐标从 Lat、Long 转换为 Long、Lat
我有一个类型为 (com.vividsolutions.jts.geom.Geometry) 的几何对象。它目前处于纬度、经度形式，我想翻转坐标，以便它的经度纬度，以便我可以将它以 GeoJSON 格
android - 我如何在 mysql 表(lat 和 long 存储的位置)中查询最接近输入位置(lat 和 long)的位置？
我想在android中制作一个应用程序。在此应用程序中，用户必须在此应用程序中注册。注册后，GPS 位置(纬度和经度)将与用户信息一起存储在数据库表中。在这个应用程序中，我想添加一个功能，即“搜索根目
php - MySql:查找 table2.name WHERE table1.lat = table2.lat AND table1.lng = table2.lng;
在过去的几天里，我一直在努力寻找这个问题的答案。我有一个 GPS 数据路线表。和一张积分表。我需要的是一个 MySql 语句，对于给定的路线，将告诉我两个端点的 Point.Name。我可以写 4 个
ios - 将 PFGeoPoint Lat 和 Long 从 Parse 快速转换为 CLLocation Lat 和 Long
我正在尝试从我的解析后端查询一组坐标(纬度和经度)。然后将它们用作 map 上的注释。虽然一旦我从解析中查询后，我不确定如何将坐标转换为 CLLocation。查询使用的代码: var usersL
javascript - 如果我有一个 lat/lng，我假设它位于 0,0 那么我如何计算另一对 lat/lng 的 x, y 坐标？
我见过这个问题的许多变体，但我无法将他们的答案与我的具体需求联系起来。我有几组 3 纬度/经度坐标对。任何集合中的坐标彼此之间都在几公里之内。对于每个集合，我想将坐标转换为 x/y 值，以便我可以
python - NetCDF 和 Python : Finding the closest lon/lat index given actual lon/lat values
我希望能够找到离经度/纬度元组最近的位置的经度/纬度坐标索引。这已经在 Java API 中作为 GridCoordSystem.findXYindexFromLatLon() 提供，但我还没有在
android - Geopoint Long 和 Lat 表示为 int，但 MediaStore 中的 Long 和 Lat 字段表示为 double ？
我对这些字段的数据类型感到困惑。我想获取存储在手机上的图像的经度和纬度，并将其表示为地理点。我的代码是: double long_ = imageCursor.getDouble(imageCurso
mysql lat long计算以显示半径内的位置
我有以下交通表，其中包含数千条火车、巴士站和机场的记录。 ID Lon Lat Name 1 0.375

首页

博学

6Ren·AI

商城

javascript - 标记 GoogleMaps Lat/Lng 交叉点