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:
this how polyline drawn drawingmanager:
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