Javascript 在html地图中拖动线条并显示线条之间的差异_Javascript_Html_Css_Google Maps_Google Maps Api 3

Javascript 在html地图中拖动线条并显示线条之间的差异

javascript html css google-maps google-maps-api-3

Javascript 在html地图中拖动线条并显示线条之间的差异,javascript,html,css,google-maps,google-maps-api-3,Javascript,Html,Css,Google Maps,Google Maps Api 3,我一直在检查关于这个话题的不同问题，但没有一个能给我一个令人信服的答案。我有一张地图，通过以下操作绘制了4个轴： function axis() { var bounds = map.getBounds(); var NECorner = bounds.getNorthEast(); var SWCorner = bounds.getSouthWest(); // horizontal top axis var PolylineCoordinates

我一直在检查关于这个话题的不同问题，但没有一个能给我一个令人信服的答案。我有一张地图，通过以下操作绘制了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（纬度_轴1-纬度轴2）和abs（经度_轴1-经度轴2）的值

有人能帮我吗？如果没有，是否有人知道已经回答了类似的问题（我想我已经全部检查过了）

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

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

替换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地图中拖动线条并显示线条之间的差异
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：90%；
}
var映射；
变量initialViewportCoordinates={
北：51.0，
东部：5.0，
南部：50.0，
西部：3.0
};
var extraDegrees=10；//这些线将延伸10度（相当于）
var lineObjects=[]；
函数drawPolyline（路径、颜色）{
var line=新的google.maps.Polyline({
路径：路径，
真的，
strokeColor：颜色，
笔划不透明度：0.9，
冲程重量：3
});
line.setMap（map）；
//拖动事件
google.maps.event.addDomListener（行'dragend'，函数（e）{
//找出正在拖动的线
var index=lineObjects.indexOf（this）；
//更新初始视口坐标
开关（索引）{
案例0:initialViewportCoordinates.north=e.latLng.lat（）；中断；
案例1:initialViewportCoordinates.east=e.latLng.lng（）；中断；
案例2:initialViewportCoordinates.south=e.latLng.lat（）；break；
案例3:initialViewportCoordinates.west=e.latLng.lng（）；break；
}
显示差异（）；
});
回流线；
}
函数displayDifference（）{
document.getElementById（'log'）。innerHTML=
“差异纬度：”+（initialViewportCoordinates.north-initialViewportCoordinates.south）+“
”+
“差异：”+（initialViewportCoordinates.east-initialViewportCoordinates.west）
;
}
函数drawViewport（）{
var north=[
{lat:initialViewportCoordinates.north，lng:initialViewportCoordinates.east+extraDegrees}，
{lat:initialViewportCoordinates.north，lng:initialViewportCoordinates.west-额外度数}
];
var east=[
{lat:initialViewportCoordinates.north+额外度数，lng:initialViewportCoordinates.east}，
{lat:initialViewportCoordinates.south-额外度数，lng:initialViewportCoordinates.east}
];
var south=[
{lat:initialViewportCoordinates.south，lng:initialViewportCoordinates.east+extraDegrees}，
{lat:initialViewportCoordinates.south，lng:initialViewportCoordinates.west-extradeges}
];
var west=[
{lat:initialViewportCoordinates.north+额外度数，lng:initialViewportCoordinates.west}，
{lat:initialViewportCoordinates.south-额外度数，lng:initialViewportCoordinates.west}
];
//我们将生成线并将生成的对象存储在此数组中
lineObjects=[
绘图多段线（北，#ff0000'），
图纸多段线（东，#ff0000'），
绘图多段线（南，#ff0000'），
绘图多段线（西，#ff0000'）
];
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:50.84，lng:4.35}，
缩放：7，
mapTypeId:'地形'
});
drawViewport（）；
显示差异（）；
}
google.maps.event.addDomListener（窗口'load'，initMap）；

你所说的“获得位置差异”是什么意思？你到底想拖什么？完整的行/路径还是仅点？@Dekel我对问题进行了一点编辑，请检查。非常感谢！这很好用。当检测到任何缩放时，我只需调整轴的大小，我就会完成。你真的很有帮助！