标记拖动后，即使多边形线也不会根据标记改变答案

【问题标题】：After marker drag even polygon line doesn't change as per marker标记拖动后，即使多边形线也不会根据标记改变
【发布时间】：2018-08-30 16:13:36
【问题描述】：

我正在研究谷歌地图多边形标记，我已经预定义了 lat long 数组，并且需要设置多边形区域，这对我来说工作正常，但是当我拖动标记多边形线时，它应该没有改变当我拖动标记时会发生变化，有人可以帮我解决这个问题吗？我在这里添加了我的代码，有人可以帮我吗？

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <style>
        /* 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;
        }
    </style>
    </head>
    <body>
    <div id="map"></div>
    <input type="text" name="estimated_area" id="estimated_area" value="">
    <input type="text" name="field_fj0d6" id="field_fj0d6" value="">

    <script>
            // This example creates a simple polygon representing the Bermuda Triangle.
            // When the user clicks on the polygon an info window opens, showing
            // information about the polygon's coordinates.

            var map;
            var infoWindow;
            var markers = []; // Store Marker in an Array


            function initMap() {
                var lM = 't';
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 5,
                    center: {lat: 24.886, lng: -70.268},
                    mapTypeId: 'terrain'
                });

                // Define the LatLng coordinates for the polygon.
                var triangleCoords = [
                    {lat: 25.774, lng: -80.190},
                    {lat: 18.466, lng: -66.118},
                    {lat: 32.321, lng: -64.757}
                ];
                // Add Markers to Coordinates
                for (var i = 0; i < triangleCoords.length; i++) {
                    var pos = triangleCoords[i];
                    var marker = new google.maps.Marker({
                        map: map,
                        position: pos,
                        draggable: true,
                    });
                    marker.setMap(map);
                    markers.push(marker);

                    var measure = {
                        mvcLine: new google.maps.MVCArray(),
                        mvcPolygon: new google.maps.MVCArray(),
                        mvcMarkers: new google.maps.MVCArray(),
                        line: null,
                        polygon: null
                    };

                    var latLng = pos;
                    var dot = marker;
                    /************** New Code ****************/
                    measure.mvcLine.push(latLng);
                    measure.mvcPolygon.push(latLng);
                    measure.mvcMarkers.push(dot);
                    var latLngIndex = measure.mvcLine.getLength() - 1;
                    google.maps.event.addListener(dot, "drag", function (evt) {
                        measure.mvcLine.setAt(latLngIndex, evt.latLng);
                        measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
                    });
                    google.maps.event.addListener(dot, "dragend", function () {
                        console.log('<p>Marker dropped: Current Lat: ' + this.getPosition().lat() + ' Current Lng: ' + this.getPosition().lng() + '</p>');
                        drag = true;
                        setTimeout(function () {
                            drag = false;
                        }, 250);
                        if (measure.mvcLine.getLength() > 1) {
                            mC();
                        }
                    });
                    if (measure.mvcLine.getLength() > 1) {
                        if (!measure.line) {
                            measure.line = new google.maps.Polyline({
                                map: map,
                                clickable: false,
                                strokeColor: "#ff5b06",
                                strokeOpacity: 1,
                                strokeWeight: 3,
                                path: measure.mvcLine
                            });
                        }
                        if (measure.mvcPolygon.getLength() > 2) {
                            if (!measure.polygon) {
                                if (lM) {
                                    measure.polygon = new google.maps.Polygon({
                                        clickable: false,
                                        map: map,
                                        fillOpacity: 0.6,
                                        fillColor: '#000000',
                                        strokeOpacity: 0,
                                        paths: measure.mvcPolygon
                                    });
                                } else {
                                    measure.polygon = new google.maps.Polygon({
                                        clickable: false,
                                        map: map,
                                        fillOpacity: 0.6,
                                        fillColor: '#000000',
                                        strokeOpacity: 0,
                                        paths: measure.mvcPolygon
                                    });
                                }
                            }
                        }
                    }
                    if (measure.mvcLine.getLength() > 1) {
                        mC();
                    }
                }

                // Construct the polygon.
                var bermudaTriangle = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: '#ff5b06',
                    strokeOpacity: 1,
                    strokeWeight: 3,
                    fillColor: '#000000',
                    fillOpacity: 0.6
                });
                bermudaTriangle.setMap(map);





            }

            function mR() {
                if (measure.polygon) {
                    measure.polygon.setMap(null);
                    measure.polygon = null;
                }
                if (measure.line) {
                    measure.line.setMap(null);
                    measure.line = null
                }
                measure.mvcLine.clear();
                measure.mvcPolygon.clear();
                measure.mvcMarkers.forEach(function (elem, index) {
                    elem.setMap(null);
                });
                measure.mvcMarkers.clear();
                document.getElementById('estimated_area').value = '';
                document.getElementById('field_fj0d6').value = '';
            }
            function mC() {
                var l = 0;
                if (measure.mvcPolygon.getLength() > 1) {
                    l = google.maps.geometry.spherical.computeLength(measure.line.getPath());
                }
                var a = 0;
                if (measure.mvcPolygon.getLength() > 2) {
                    a = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
                }
                if (a) {
                    var km = a / (1000 * 1000);
                    var feet = a * 10.7639104;
                    var yards = a * 1.19599005;
                    var acres = a * 0.000247105381;
                    var unit = " meters&sup2;";
                    var unit1 = " acres";
                    var unit2 = " km&sup2;";
                    var unit3 = " sq. ft.";
                    var unit4 = " yards&sup2;";
                    var area = feet.toFixed(0) + unit3;
                    //This is for update details in review tab
                    document.getElementById('estimated_area').value = parseFloat(area);
                    document.getElementById('field_fj0d6').value = String(area);
                }
            }
            function rL() {
                var test = measure.mvcLine.pop();
                if (test) {
                    measure.mvcPolygon.pop();
                    var dot = measure.mvcMarkers.pop();
                    dot.setMap(null);
                    mC();
                }
            }


    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&callback=initMap">
    </script>
    </body>
</html>

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers google-maps-api-2

【解决方案1】：

您需要将多边形的顶点绑定到标记。

var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#ff5b06',
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: '#000000',
  fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++) {
  var mark = new google.maps.Marker({
    position: bermudaTriangle.getPath().getAt(),
    map: map,
    draggable: true
  });
  mark.bindTo('position', bermudaTriangle.binder, (j).toString());
}

online example

proof of concept fiddle

代码 sn-p：

var map;
var markers = []; // Store Marker in an Array

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [{
      lat: 25.774,
      lng: -80.190
    },
    {
      lat: 18.466,
      lng: -66.118
    },
    {
      lat: 32.321,
      lng: -64.757
    }
  ];
  // Add Markers to Coordinates
  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#ff5b06',
    strokeOpacity: 1,
    strokeWeight: 3,
    fillColor: '#000000',
    fillOpacity: 0.6
  });
  bermudaTriangle.setMap(map);
  bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
  for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++) {
    var mark = new google.maps.Marker({
      position: bermudaTriangle.getPath().getAt(),
      map: map,
      draggable: true
    });
    mark.bindTo('position', bermudaTriangle.binder, (j).toString());
  }
}
google.maps.event.addDomListener(window, 'load', initMap);
/*
 * Use bindTo to allow dynamic drag of markers to refresh poly.
 */

function MVCArrayBinder(mvcArray) {
  this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
  if (!isNaN(parseInt(key))) {
    return this.array_.getAt(parseInt(key));
  } else {
    this.array_.get(key);
  }
}
MVCArrayBinder.prototype.set = function(key, val) {
  if (!isNaN(parseInt(key))) {
    this.array_.setAt(parseInt(key), val);
  } else {
    this.array_.set(key, val);
  }
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

【讨论】：