阻力線

-1

我一直在檢查有關此主題的不同問題，但他們沒有給我一個令人信服的答案。我有一個地圖中，我已經做繪製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); 
}

我現在想要的是能夠水平或垂直拖拽這些軸（視軸）不斷獲得位置差在它們之間（在一方面的水平線之間和另一個垂直者之間）。

我的輸出是這一個：如果問題是不夠清楚，我想：

-be能夠移動/用鼠標拖動連奪四個紅色線

- 在地圖上方顯示abs（latitude_axis1 -latitude-axis2）和abs（longitude_axis1-longitude-axis2）的值

任何人都可以幫我嗎？如果沒有，沒有任何人知道已經回答了類似的問題（我認爲我已經檢查了所有的）

來源

2016-09-07 paulzaba

您是什麼意思「獲取位置差異」？你究竟想要拖動什麼？完整的線路/路徑還是隻有一點？ – Dekel

@Dekel我編輯的問題，一點點，請檢查一下。 – paulzaba

我的代碼是不是假的證明，如不採取下江南北線停止用戶行，這不是不可能的拖線太遠，...

但是，這是（或多或少）你的要求是什麼。

更換您的API密鑰

編輯：通知，第46行，你可以改變 'dragend' 到 '拖'。然後在用戶拖動時更改顯示屏

<!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>

來源

2016-09-07 18:00:09

非常感謝！這工作完美。我只需要在檢測到任何縮放時調整軸的大小，然後完成。你真的很有幫助！ – paulzaba

是的，很高興提供幫助 –

回答

相關問題