从绘图管理器中删除折线工具答案

【问题标题】：Remove Polyline tool from drawing manager从绘图管理器中删除折线工具
【发布时间】：2021-09-22 18:27:56
【问题描述】：

我想从 Google 地图 API V3 中删除折线绘图工具，对不起，如果这是一个愚蠢的问题。我是新手，在这里问之前我已经到处搜索了。谢谢。

为了更清楚，我添加了下面的图片。我想从选项中删除该工具。

我正在使用下面的代码来初始化drawingManager

drawingManager = new google.maps.drawing.DrawingManager({
    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: {
        draggable: false,
        label: ""
    },

    // polylineOptions: {
    //     editable: false,
    // },

    rectangleOptions: polyOptions,
    circleOptions: polyOptions,
    polygonOptions: polyOptions,
    map: map
});

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您发布的代码出现 javascript 错误：ReferenceError: polyOptions is not defined。

您的 DrawingManager 构造函数中有错字，drawingModes 属于 drawingControlOptions 对象（根据 documentation）您的代码：

drawingManager = new google.maps.drawing.DrawingManager({
    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,
  ],

应该是：

var drawingManager = new google.maps.drawing.DrawingManager({
    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,
      ],
    },

（注意drawingControlOptions的结束}的位置）

proof of concept fiddle

代码 sn-p：

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
  });
  var drawingManager = new google.maps.drawing.DrawingManager({
    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: {
      draggable: false,
      label: ""
    },

    /* polyOptions is not defined... */
    // rectangleOptions: polyOptions,
    // circleOptions: polyOptions,
    // polygonOptions: polyOptions,
    map: map
  });


  drawingManager.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Drawing Tools</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=drawing&v=weekly&channel=2" async></script>
</body>

</html>

【讨论】：