Question

我一直在检查有关此主题的不同问题，但没有一个能给我一个令人信服的答案。我有一张地图，其中我通过执行以下操作绘制了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);
}

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

我的输出就是这个：如果问题不够明确，我想：

- 能够通过用鼠标拖动它们来移动/扫描四条红线

- 在地图上方显示：abs（latitude_axis1 -latitude-axis2）和abs（longitude_axis1 -longitude-axis2）的值

任何人都可以帮助我吗？如果没有，有没有人知道一个类似的问题已被回答（我认为我已经检查了所有）

Answer 1

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

但这是（或多或少）你要求的。

替换您的API密钥

编辑：注意，在第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>

拖动html地图中的行并显示行

1 个答案: