Google Maps polygoncomplete侦听器未触发

-1

下面是我的代码的确切副本。由于某种原因，当完成poly的创建时，“polygoncomplete”函数完全不会触发。这行是在JavaScript的最后。任何帮助表示赞赏。Google Maps polygoncomplete侦听器未触发

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     #map { 
      height: 100%; 
     } 
     .controls { 
      margin-top: 10px; 
      border: 1px solid transparent; 
      border-radius: 2px 0 0 2px; 
      box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      height: 32px; 
      outline: none; 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     } 

     #pac-input { 
      background-color: #fff; 
      font-family: Roboto; 
      font-size: 15px; 
      font-weight: 300; 
      margin-left: 12px; 
      padding: 0 11px 0 13px; 
      text-overflow: ellipsis; 
      width: 300px; 
     } 

     #pac-input:focus { 
      border-color: #4d90fe; 
     } 

     .pac-container { 
      font-family: Roboto; 
     } 

     #type-selector { 
      color: #fff; 
      background-color: #4d90fe; 
      padding: 5px 11px 0px 11px; 
     } 

     #type-selector label { 
      font-family: Roboto; 
      font-size: 13px; 
      font-weight: 300; 
     } 
     #target { 
      width: 345px; 
     } 
    </style> 
    <title>Places Searchbox</title> 
</head> 
<body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
    <script> 
     function initAutocomplete() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       center: {lat: 41.850033, lng: -98.6500523}, 
       zoom: 4, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      // Initialize Draw Tool 
      var drawingManager = new google.maps.drawing.DrawingManager({ 
       drawingMode: google.maps.drawing.OverlayType.MARKER, 
       drawingControl: true, 
       drawingControlOptions: { 
        position: google.maps.ControlPosition.TOP_CENTER, 
        drawingModes: [ 
         google.maps.drawing.OverlayType.MARKER, 
         google.maps.drawing.OverlayType.CIRCLE, 
         google.maps.drawing.OverlayType.POLYGON, 
         google.maps.drawing.OverlayType.POLYLINE, 
         google.maps.drawing.OverlayType.RECTANGLE 
        ] 
       }, 
       markerOptions: {icon: 'images/beachflag.png'}, 
       circleOptions: { 
        fillColor: '#ffff00', 
        fillOpacity: 1, 
        strokeWeight: 5, 
        clickable: false, 
        editable: true, 
        zIndex: 1 
       } 
      }); 
      drawingManager.setMap(map); 

      // Create the search box and link it to the UI element. 
      var input = document.getElementById('pac-input'); 
      var searchBox = new google.maps.places.SearchBox(input); 
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

      // Bias the SearchBox results towards current map's viewport. 
      map.addListener('bounds_changed', function() { 
       searchBox.setBounds(map.getBounds()); 
      }); 

      var markers = []; 
      // [START region_getplaces] 
      // Listen for the event fired when the user selects a prediction and retrieve 
      // more details for that place. 
      searchBox.addListener('places_changed', function() { 
       var places = searchBox.getPlaces(); 

       if (places.length == 0) { 
        return; 
       } 

       // Clear out the old markers. 
       markers.forEach(function(marker) { 
        marker.setMap(null); 
       }); 
       markers = []; 

       // For each place, get the icon, name and location. 
       var bounds = new google.maps.LatLngBounds(); 
       places.forEach(function(place) { 
        var icon = { 
         url: place.icon, 
         size: new google.maps.Size(71, 71), 
         origin: new google.maps.Point(0, 0), 
         anchor: new google.maps.Point(17, 34), 
         scaledSize: new google.maps.Size(25, 25) 
        }; 

        // Create a marker for each place. 
        markers.push(new google.maps.Marker({ 
         map: map, 
         icon: icon, 
         title: place.name, 
         position: place.geometry.location 
        })); 

        if (place.geometry.viewport) { 
         // Only geocodes have viewport. 
         bounds.union(place.geometry.viewport); 
        } 
        else{ 
         bounds.extend(place.geometry.location); 
        } 
       }); 
       map.fitBounds(bounds); 
      }); 
      // [END region_getplaces] 
      google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { 
       var coordinates = (polygon.getPath().getArray()); 
       console.log(coordinates); 
      }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places,drawing&callback=initAutocomplete" async defer></script> 
</body>

来源

2015-08-17 dschuett

对我来说聆听者按预期工作 –

哇，我一直在使用画线绘制我的多边形。它有助于使用“绘制多边形”按钮。谢谢！ – dschuett

确保您使用的是绘图聚选项，不画线。

来源

2015-08-17 15:35:56 dschuett

Google Maps polygoncomplete侦听器未触发

回答

相关问题