谷歌地图禁用可编辑多边形上的新顶点按钮

Question

我有一张地图，我正在使用绘图库在上面绘图。

基本上，在我创建我的形状后，它是可编辑的，但你可以在图像中看到，我已经圈出了允许你创建新顶点的点。我想禁用这些，但我仍然希望能够在拐角处移动。

这可能吗？

Answer 1

不要使用绘图管理器。创建 4 个可拖动标记，将它们绑定到多边形的顶点。

Answer 2

在 vuejs 中使用vue2-google-maps

<template>
    <div>
        <div class="row">
            <div
                class="col-12"
                style="margin-top: 100px;margin-bottom: 100px;"
            >
                <GmapMap
                    ref="mapRef"
                    @place_changed="updateCenter"
                    :center="mapCenter"
                    :zoom="8"
                    style="width:100%;height: 100%;min-height:600px;"
                >
                    <GmapPolygon
                        v-if="shapes.value == 'polygon'"
                        ref="polygonRef"
                        :paths="polygonPaths"
                        :options="shapeOptions"
                        @dragend="polygonHandler"
                        @paths_changed="updateEdited"
                    />
                </GmapMap>

            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div
                    v-if="geoJSON"
                    class="card-body p-3 mt-3"
                >
                    <label class="font-20 text-info">GeoJSON ({{shapes.value}}) <button
                            class="btn btn-info"
                            @click="resetPolygon()"
                        >Reset Polygon Path</button> </label>
                    <pre v-html="syntaxHighlight(geoJSON)"></pre>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import {gmapApi} from 'vue2-google-maps'
  export default {
    data() {
      return {
        mapCenter: {
          lat: 49.282730,
          lng: -123.120735
        }, // vancouver
        shapeOptions: {
          fillColor: '#777',
          fillOpacity: 0.5,
          strokeWeight: 2,
          strokeColor: '#999',
          draggable: true,
          editable: true,
        },
        rectangleBounds: {},
        circleRadius: 10000,
        shapes: {
          value: "polygon",
          options: {
            "polygon": "Polygon",
          },
        },
        polygonPaths: [],
        mvcPaths: null,
        geoJSON: '',
        position: '',
        polygonObjectPaths: '',

      }
    },
    computed: {
      google: gmapApi
    },
    methods: {
      updateCenter(place) {
        this.mapCenter = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        }
      },
      syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
          (match) => {
            var cls = 'number';
            if (/^"/.test(match)) {
              if (/:$/.test(match)) {
                cls = 'key';
              } else {
                cls = 'string';
              }
            } else if (/true|false/.test(match)) {
              cls = 'boolean';
            } else if (/null/.test(match)) {
              cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
          });
      },
      rectangleHandler(event) {
        this.$refs.rectangleRef.$rectanglePromise.then((res) => {

          const bounds = res.getBounds();
          this.position = {
            lat: event.latLng.lat(),
            lng: event.latLng.lng()
          }

          /* 
              south: bounds.getNorthEast().lat(),
              west: bounds.getSouthWest().lng(),
              north: bounds.getSouthWest().lat(),
              east: bounds.getNorthEast().lng(),
          */

          /* 
              const topLeftLat = bounds.south;
              const topLeftLon = bounds.west;
              const bottomRightLat = bounds.north;
              const bottomRightLon = bounds.east;
          */
          this.rectangleBounds = {
            south: bounds.getNorthEast().lat(),
            west: bounds.getSouthWest().lng(),
            north: bounds.getSouthWest().lat(),
            east: bounds.getNorthEast().lng(),
          };
        }).catch(err => {
          console.log(err)
          toastr.error(err)
        })
      },
      circleHandler(event) {
        this.$refs.circleRef.$circlePromise.then((res) => {
          this.getShapeBound(event, res)
        }).catch(err => {
          console.log(err)
          toastr.error(err)
        })
      },
      polygonHandler(event) {
        let that = this
        if (!that.mvcPaths) return null

        let paths = [];

        for (let i = 0; i < that.mvcPaths.getLength(); i++) {

          let path = [];

          for (let j = 0; j < that.mvcPaths.getAt(i).getLength(); j++) {
            let point = that.mvcPaths.getAt(i).getAt(j);
            let vertex = {
              lat: point.lat(),
              lng: point.lng()
            }
            path.push(vertex);
          }

          paths.push(path);
        }
        that.polygonPaths = paths
        that.position = event ? {
          lat: event.latLng.lat(),
          lng: event.latLng.lng()
        } : that.position
        that.$emit("shapeBounds", {
          position: that.position,
          areaBounds: that.geoJSON
        })
      },
      updateEdited(mvcPaths) {
        if (mvcPaths.getAt(0).getLength() != 8) {
          // toastr.warning('WARNING: Vertices limit (8) exceeeds!')
          // toastr.info('INFO: Cannot add another vertex.')
          const deepPaths = _.cloneDeep(this.mvcPaths)
          this.$refs.polygonRef.$polygonObject.setPaths(deepPaths)

        } else {
          // const deepPaths = _.cloneDeep(this.$refs.polygonRef.$polygonObject.getPaths())
          // this.polygonObjectPaths = deepPaths
          this.mvcPaths = mvcPaths
        }
        this.polygonHandler(null)
      },
      resetPolygon() {
        this.setDefaultPolygon()
        this.mapCenter = {
          lat: 49.282730,
          lng: -123.120735
        } // vancouver

      },
      setDefaultPolygon() {
        this.polygonPaths = [
          [{
              "lat": 50.09911333568685,
              "lng": -122.60148359439869
            },
            {
              "lat": 50.09911333568685,
              "lng": -123.60148359439869
            },
            {
              "lat": 49.706391343959424,
              "lng": -124.45023542545337
            },
            {
              "lat": 49.06655990813951,
              "lng": -124.45023542545337
            },
            {
              "lat": 48.629395422545215,
              "lng": -123.71750913761157
            },
            {
              "lat": 48.629395422545215,
              "lng": -122.60407568119068
            },
            {
              "lat": 49.02042551892465,
              "lng": -121.88615003726979
            },
            {
              "lat": 49.658852974092355,
              "lng": -121.88615003726979
            },
          ]
        ]
      }
    },
    watch: {
      polygonPaths(paths) {
        // since we can create only one poygon at a time
        paths = paths[0]
        if (Array.isArray(paths) && paths.length) {

          const closeLoop = (p) => {
            let first = p[0]
            let last = p[p.length - 1]

            if (Array.isArray(p) && p.length && !_.isEqual(first, last)) {
              return p.concat(p.slice(0, 1))
            }
            return p
          }
          let closedLoopedPaths = closeLoop(paths)

          this.geoJSON = JSON.stringify({
            "geo_shape": {
              "Geometry": {
                "shape": {
                  type: 'polygon',
                  coordinates: [closedLoopedPaths.map(({
                    lat,
                    lng
                  }) => [lng, lat])]
                },
                "relation": "intersects"
              },
              "ignore_unmapped": true
            }

          }, null, 4)
        }
        this.$emit("emitGeojson", {
          geoJSON: this.geoJSON
        })
      }
    },
    mounted() {
     this.handleShapeSelect()
    }
  }
</script>

<style>
  .string {
    color: green;
  }
  
  .number {
    color: darkorange;
  }
  
  .boolean {
    color: blue;
  }
  
  .null {
    color: magenta;
  }
  
  .key {
    color: red;
  }
</style>