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

Question

我使用折线在谷歌地图上绘制形状。在谷歌地图上拖动时，应绘制线条，在绘制的形状内需要获取所有标记位置的纬度和经度。我曾使用以下代码来实现这些功能。

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);

使用上面的代码我可以正确获取标记位置。但我在完成折线形状后也面临问题，当单击 map 时它会进一步延伸线，它不应该是这样的。一旦我在谷歌地图上绘制形状，如何在不使用绘图管理器的情况下将绘图模式设置为 false。在单击重置 map 之前，我只需要在 map 上绘制一种形状。

请任何人帮助我阻止这种情况，进一步延长折线。如何在没有绘图管理器的情况下实现这一目标。

Answer 1

如果您不想在单击 map 时添加点，请删除导致发生这种情况的事件监听器:

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

proof of concept fiddle

代码片段:

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>