个人中心
gpt4 book ai didi

javascript - 在html map 中拖动线条并显示线条之间的差异

转载 作者：行者123 更新时间：2023-11-28 17:26:53 25 4
gpt4 key购买 nike

我一直在检查关于这个主题的不同问题，但没有一个能给我一个令人信服的答案。我有一张 map ，其中我通过执行以下操作绘制了 4 轴:

function axis() {
    var bounds = map.getBounds();
    var NECorner = bounds.getNorthEast();
    var SWCorner = bounds.getSouthWest();

    // horizontal top axis

    var PolylineCoordinates = [
        new google.maps.LatLng(NECorner.lat()-0.0002, NECorner.lng()),
        new google.maps.LatLng(NECorner.lat()-0.0002, SWCorner.lng()),
    ];

    var Path = new google.maps.Polyline({
        clickable: false,
        geodesic: true,
        path: PolylineCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.000000,
        strokeWeight: 0.8
    });

    Path.setMap(map);

    // horizontal low axis

    var PolylineCoordinates = [
        new google.maps.LatLng(SWCorner.lat()+0.0002, NECorner.lng()),
        new google.maps.LatLng(SWCorner.lat()+0.0002, SWCorner.lng()),
    ];

    var Path = new google.maps.Polyline({
        clickable: false,
        geodesic: true,
        path: PolylineCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.000000,
        strokeWeight: 0.8
    });

    Path.setMap(map);

    // vertical left axis

    var PolylineCoordinates = [
        new google.maps.LatLng(NECorner.lat(), SWCorner.lng()+0.0002),
        new google.maps.LatLng(SWCorner.lat(), SWCorner.lng()+0.0002),
    ];

    var Path = new google.maps.Polyline({
        clickable: false,
        geodesic: true,
        path: PolylineCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.000000,
        strokeWeight: 0.8
    });

    Path.setMap(map);

    // vertical left axis

    var PolylineCoordinates = [
        new google.maps.LatLng(NECorner.lat(), NECorner.lng()-0.0002),
        new google.maps.LatLng(SWCorner.lat(), NECorner.lng()-0.0002),
    ];

    var Path = new google.maps.Polyline({
        clickable: false,
        geodesic: true,
        path: PolylineCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.000000,
        strokeWeight: 0.8
    });

    Path.setMap(map);
}

我现在想要的是能够水平或垂直拖动这些轴(取决于轴)并不断获得它们之间的位置差异(一方面是水平线之间，另一方面是垂直线之间) .

我的输出是这样的: enter image description here如果问题不够清楚，我想:

-可以通过鼠标拖动来移动/扫过四条红线

-在 map 上方显示abs(latitude_axis1 -latitude-axis2)和abs(longitude_axis1 -longitude-axis2)的值

谁能帮帮我？如果没有，有没有人知道已经回答过的类似问题(我想我已经检查了所有问题)

最佳答案

我的代码不是虚拟证明，就像它不会阻止用户在南线下方走北线，也不是不可能将线拖得太远，...

但这(或多或少)是您要求的。

替换您的 API key

编辑:注意，在第 46 行，您可以将“dragend”更改为“drag”。然后在用户拖动时改变显示

<!DOCTYPE html>
<html>
<head>
    <title>drag lines in html map and display difference between lines</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 90%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="log"></div>
    <div id="info">
        <a href="http://stackoverflow.com/questions/39370766/drag-lines-in-html-map-and-display-difference-between-lines/39376480#39376480">Stackoverflow</a>
    </div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
    <script>
        var map;
        var initialViewportCoordinates = {
          north: 51.0,
          east:  5.0,
          south: 50.0,
          west: 3.0
        };
        var extraDegrees = 10;  // the lines will extend 10 degrees (which is pretty much) 
        var lineObjects = [];

        function drawPolyline(path, color) {
            var line = new google.maps.Polyline({
                path: path,
                draggable: true,
                strokeColor: color,
                strokeOpacity: 0.9,
                strokeWeight: 3
            });
            line.setMap(map);
            // drag event
            google.maps.event.addDomListener(line, 'dragend', function(e) {
              // find out which line is being dragged
              var index = lineObjects.indexOf(this);
              // update initialViewportCoordinates
              switch(index) {
                case 0: initialViewportCoordinates.north = e.latLng.lat(); break;
                case 1: initialViewportCoordinates.east =  e.latLng.lng(); break;
                case 2: initialViewportCoordinates.south = e.latLng.lat(); break;
                case 3: initialViewportCoordinates.west =  e.latLng.lng(); break;
              }
              displayDifference();
            });
            return line;
        }
        function displayDifference() {
          document.getElementById('log').innerHTML = 
            'difference lat: ' + (initialViewportCoordinates.north - initialViewportCoordinates.south) + '<br/>' +
            'difference lng: ' + (initialViewportCoordinates.east - initialViewportCoordinates.west) 
            ;
        }
        function drawViewport() {
          var north = [
            {lat: initialViewportCoordinates.north , lng: initialViewportCoordinates.east + extraDegrees},
            {lat: initialViewportCoordinates.north, lng: initialViewportCoordinates.west - extraDegrees}
          ];
          var east = [
            {lat: initialViewportCoordinates.north + extraDegrees , lng: initialViewportCoordinates.east},
            {lat: initialViewportCoordinates.south - extraDegrees, lng: initialViewportCoordinates.east}
          ];
          var south = [
            {lat: initialViewportCoordinates.south , lng: initialViewportCoordinates.east + extraDegrees},
            {lat: initialViewportCoordinates.south, lng: initialViewportCoordinates.west - extraDegrees}
          ];
          var west = [
            {lat: initialViewportCoordinates.north + extraDegrees , lng: initialViewportCoordinates.west},
            {lat: initialViewportCoordinates.south - extraDegrees, lng: initialViewportCoordinates.west}
          ];
          // we will genetate the lines and store the resulting objects in this array
          lineObjects = [
            drawPolyline(north, '#ff0000'),
            drawPolyline(east, '#ff0000'),
            drawPolyline(south, '#ff0000'),
            drawPolyline(west, '#ff0000')
          ];
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 50.84, lng: 4.35},
                zoom: 7,
                mapTypeId: 'terrain'
            });
            drawViewport();
            displayDifference();
        }
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</body>
</html>

关于javascript - 在html map 中拖动线条并显示线条之间的差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39370766/

25 4 0
文章推荐： python - C 连续矩阵上的 Fortran gemm 函数
文章推荐： javascript - 如何使用 jQuery 仅突出显示选定的缩略图？
文章推荐： javascript - 我如何在JS中将数字(例如: 2. 12)四舍五入到最接近的十分之一(2.1)
文章推荐： python - 根据另一个表制作多个表？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com