如何在谷歌地图上拖动时绘制折线

Question

I have used polyline for drawing shape on google maps. While dragging on google maps the line should be drawn, within the drawn shape need to get all the marker position's lat and lang. I have used for achieving these functionality using following code.

function disable(){

    map.setOptions({
        draggable: false, 
        zoomControl: false, 
        scrollwheel: false, 
        disableDoubleClickZoom: false
    });
}


function enable(){

    map.setOptions({
        draggable: true, 
        zoomControl: true, 
        scrollwheel: true, 
        disableDoubleClickZoom: true
    });
}

function initialize() {

    var polygon,path,marker, i,poly;    
    var markers = [], selected = [];
    var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(13.060874081343613,80.24474027142173),
          mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     var locations = [['Bondi Beach', 13.014047884121025, 80.22414090618736, 1],['Coogee Beach', 13.002005430858949, 80.22139432415611, 2],['Cronulla Beach', 13.011371833931621, 80.25435330853111, 3],['Manly Beach', 12.99397680394788, 80.23238065228111, 4],['Maroubra Beach', 13.006019646912229, 80.25023343548423, 5]];

     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
     var infowindow = new google.maps.InfoWindow();

     for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
     });
     marker.set("id",locations[i][3]);
     markers.push(marker);
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
      })(marker, i));
    }   

    //draw
    $("#draw a").click(function(e) {

         e.preventDefault();
         disable()
         //Reset map
         if(polygon){
            polygon.setMap(null);
            selected = [];
         }
         google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
                polygon=new google.maps.Polyline({map:map,clickable:false});

                //move-listener
                var move=google.maps.event.addListener(map,'mousemove',function(e){
                    polygon.getPath().push(e.latLng);
                });

                poly = polygon.getPath();
                //mouseup-listener
                google.maps.event.addListenerOnce(map,'mouseup',function(e){
                    google.maps.event.removeListener(move);
                    var path=polygon.getPath();
                    polygon.setMap(null);

                    polygon=new google.maps.Polygon({map:map,path:path});

                    google.maps.event.clearListeners(map.getDiv(), 'mousedown');

                    enable()
                });
         });

     });

     function addPolyPoints(e) {
        poly.push(e.latLng);
        var markerCnt = 0;var sel = [];
        for (var i = 0; i < markers.length; i++) {
            if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), polygon)) {
                sel={'hotel_id' : markers[i].get("id"), 'lat':markers[i].position.lat(),'lng':markers[i].position.lng()};
                selected.push(sel);
                markerCnt++;
            }
        }
        if(selected){
            console.log(selected);
            $.each(selected, function (i, field) {
            });
        }
        document.getElementById('info').innerHTML = "markers in polygon: " + markerCnt;
      }
      google.maps.event.addListener(map, 'click', addPolyPoints);
}

google.maps.event.addDomListener(window, 'load', initialize);

Using the above code i am getting markers position correctly. But i am facing problem after completing polyline shape too it extends the line further when clicking on map, it should not be like. Once i drawn shape on google maps how to set drawing mode false without using drawingManager. I need to draw only one shape on maps until i am clicking reset maps.

Please any one help me to prevent this, further extending of polyline. how to achieve this without drawing manager.

Answer 1

If you don't want to add points when the map is clicked, remove the event listener that causes that to happen:

google.maps.event.addListener(map, 'click', addPolyPoints);

proof of concept fiddle

code snippet:

 function disable() { map.setOptions({ draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: false }); } function enable() { map.setOptions({ draggable: true, zoomControl: true, scrollwheel: true, disableDoubleClickZoom: true }); } function initialize() { var polygon, path, marker, i, poly; var markers = [], selected = []; var mapOptions = { zoom: 14, center: new google.maps.LatLng(13.060874081343613, 80.24474027142173), mapTypeId: google.maps.MapTypeId.ROADMAP }; var locations = [ ['Bondi Beach', 13.014047884121025, 80.22414090618736, 1], ['Coogee Beach', 13.002005430858949, 80.22139432415611, 2], ['Cronulla Beach', 13.011371833931621, 80.25435330853111, 3], ['Manly Beach', 12.99397680394788, 80.23238065228111, 4], ['Maroubra Beach', 13.006019646912229, 80.25023343548423, 5] ]; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var infowindow = new google.maps.InfoWindow(); var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); bounds.extend(marker.getPosition()); marker.set("id", locations[i][3]); markers.push(marker); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } map.fitBounds(bounds); //draw $("#draw a").click(function(e) { e.preventDefault(); disable() //Reset map if (polygon) { polygon.setMap(null); selected = []; } var mousedown = google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) { polygon = new google.maps.Polyline({ map: map, clickable: false }); //move-listener var move = google.maps.event.addListener(map, 'mousemove', function(e) { polygon.getPath().push(e.latLng); }); poly = polygon.getPath(); //mouseup-listener google.maps.event.addListenerOnce(map, 'mouseup', function(e) { google.maps.event.removeListener(move); google.maps.event.removeListener(mousedown); var path = polygon.getPath(); polygon.setMap(null); polygon = new google.maps.Polygon({ map: map, path: path }); google.maps.event.clearListeners(map.getDiv(), 'mousedown'); enable() }); }); }); function addPolyPoints(e) { poly.push(e.latLng); var markerCnt = 0; var sel = []; for (var i = 0; i < markers.length; i++) { if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), polygon)) { sel = { 'hotel_id': markers[i].get("id"), 'lat': markers[i].position.lat(), 'lng': markers[i].position.lng() }; selected.push(sel); markerCnt++; } } if (selected) { console.log(selected); $.each(selected, function(i, field) {}); } document.getElementById('info').innerHTML = "markers in polygon: " + markerCnt; } } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="draw"><a href="#">draw</a> </div> <div id="map_canvas"></div> <div id="info"></div>