Question

我知道您可以通过以下方式覆盖多边形的选项

myPolygon.setOptions(newOptions);

但是我想找出的只是改变多边形一个边缘的颜色，而不是整个多边形。

有人知道怎么做吗？

以下是我要执行的操作的要点：

google.maps.event.addListener(drawingManager,'overlaycomplete', (event) => {
        const selectedShape = event.overlay;
        const selectedShapeType = event.type;

        google.maps.event.addListener(selectedShape, 'click', e => {
           // code to change the clicked edge of a polygon
        });
      }

Answer 1

我终于能够找到答案。

这是基于另一个Stackoverflow post

这是更新的代码：

http://jsfiddle.net/4sfw953h/

if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}
var markerDist;
var startPointMarker = new google.maps.Marker();
var endPointMarker = new google.maps.Marker();
var map;

var clickedPolylineLatLng = new google.maps.MVCArray();
var clickedPolylineArray = [];
var clickedPolyline = new google.maps.Polyline({
  path: clickedPolylineLatLng,
  strokeColor: 'blue',
  strokeWidth: 10
});

function distanceBetween(point1, point2) {
  return google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
}

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 2,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10
  });

  google.maps.event.addListener(flightPath, 'click', function(el) {
    markerDist = {
      p1: '',
      p2: '',
      d: -1
    };

    startPointMarker.setMap(null);
    endPointMarker.setMap(null);

    clickedPolyline.setMap(null);
    //clickedPolylineLatLng.clear();


    var latLng = el.latLng;

    var allPoints = this.getPath().getArray();
    for (var i = 0; i < allPoints.length - 1; i++) {
      var ab = distanceBetween(allPoints[i], latLng);
      var bc = distanceBetween(latLng, allPoints[i + 1]);
      var ac = distanceBetween(allPoints[i], allPoints[i + 1]);


      console.log(parseFloat(markerDist.d) + ' ' + Math.abs(ab + bc - ac));
      if ((parseFloat(markerDist.d) == -1) || parseFloat(markerDist.d) > parseFloat(Math.abs(ab + bc - ac))) {
        markerDist.p1 = allPoints[i];
        markerDist.p2 = allPoints[i + 1];
        markerDist.d = Math.abs(ab + bc - ac);

        clickedPolylineLatLng.clear();
        clickedPolylineLatLng.push(allPoints[i]);
        clickedPolylineLatLng.push(allPoints[i + 1]);


      }
    }
    startPointMarker.setPosition(markerDist.p1);
    endPointMarker.setPosition(markerDist.p2);
    startPointMarker.setMap(map);
    endPointMarker.setMap(map);
    clickedPolyline.setMap(map);
  });
  flightPath.setMap(map);
}

window.onload = initialize;

单击谷歌地图时如何更改多边形的边缘

1 个答案: