javascript - drag lines in html map and display difference between lines -
i've been checking different questions topic none of them gives me convincing answer. have map in i've plotted 4 axis doing following:
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); } what want able drag these axis horizontally or vertically (depending on axis) , position difference between them (between horizontals on 1 hand , between vertical ones on other one).
my output one: 
in case question not clear enough, want to:
-be able move/sweep 4 red lines dragging them mouse
-show value of: abs(latitude_axis1 -latitude-axis2) , abs(longitude_axis1 -longitude-axis2) above map
can me? if not, know similar question has been answered (i think have checked them all)
my code not dummy proof, doesn't stop user taking north line under south line, , it's not impossible drag lines far, ...
but (more or less) requested.
replace api key
edit: notice, on line 46, can change 'dragend' 'drag'. display changed while user dragging
<!doctype html> <html> <head> <title>drag lines in html map , 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; // lines extend 10 degrees (which 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 line 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} ]; // genetate lines , store resulting objects in 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> 
Comments
Post a Comment