google maps api 3 - Drawing polyline similar to drawing of polyline in DrawingManager -

-

this how draw polyline click first point , polyline drawn after click second point on map canvas:

sample google.maps.polyline

this how polyline drawn drawingmanager:

sample drawing manager

i'd draw regular polyline same way drawn drawingmanager line continued show move mouse across map canvas.

thanks,

this works me, 1 important detail specifying clickable: false when constructing polyline, otherwise didn't register click event on map.

<!doctype html> <html>   <head>     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">     <meta charset="utf-8">     <title>complex polylines</title>     <style>       html, body {         height: 100%;         margin: 0;         padding: 0;       }       #map {         height: 100%;       }     </style>   </head>   <body>     <div id="map"></div>     <script> var poly; var map; var existingpolylinepath; var temppoly;  function initmap() {   map = new google.maps.map(document.getelementbyid('map'), {     zoom: 7,     center: {lat: 41.879, lng: -87.624}  // center map on chicago, usa.   });    poly = new google.maps.polyline({     strokecolor: '#000000',     strokeopacity: 1.0,     strokeweight: 3,     map: map,     clickable: false   });    temppoly = new google.maps.polyline({     strokecolor: '#ff0000',     strokeopacity: 1.0,     strokeweight: 3,     map: map,     clickable: false   });    // add listener click event   map.addlistener('click', addlatlng);    map.addlistener('mousemove', function(event) {     existingpolylinepath = poly.getpath();      if (existingpolylinepath.length > 0) {         temppoly.setpath([existingpolylinepath.getat(existingpolylinepath.length - 1), event.latlng]);     }   }); }  // handles click events on map, , adds new point polyline. function addlatlng(event) {   var path = poly.getpath();    // because path mvcarray, can append new coordinate   // , automatically appear.   path.push(event.latlng);    // add new marker @ new plotted point on polyline.   var marker = new google.maps.marker({     position: event.latlng,     title: '#' + path.getlength(),     map: map   }); }     </script>     <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initmap"></script>   </body> </html>

Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more