Как удалить один край многоугольника из Google Map JavaScript

#javascript #google-maps #google-maps-api-3

Вопрос:

 window.google.maps.event.addListener(
  this.poly, //currently selected polygon
  "mouseup",
  (event) => {
    if (this.insidePolygon(event.latLng)) {
      const path = this.poly.getPaths().getAt(event.path);
        if (event?.vertex >= 0) { //returns true if vertex is being dragged
          path.removeAt(event.vertex); // removes the current vertex
        } else if (event?.edge >= 0) { //returns true if edge is being dragged
          path.removeAt(event.edge); // does not remove the current edge
        }
    } else {
      this.calcAreaAndLatlng();
    }
  }
);

У меня есть несколько полигонов внутри карты Google. Я пытаюсь использовать событие mouseup для перетаскивания и редактирования полигона. Я не хочу, чтобы мои полигоны перекрывались. Вот почему я использую insidePolygon функцию, которая возвращает значение true, если текущий полигон перекрывает любые другие полигоны. Поэтому, когда функция возвращает значение true, я использую path.removeAt(event.vertex) для удаления вершины, которая пыталась перекрываться. Но проблема начинается, когда я пытаюсь перетащить ребро вместо вершины. Тогда path.removeAt(event.edge) не работает, даже если оба event.vertex и event.edge возвращают индекс вершины и ребра соответственно. Есть ли какой-нибудь способ удалить ребро, как я удалил вершину?

1. Может быть, вам нужно сбросить путь полигона на ваш новый путь, например path.removeAt(event.edge); , после добавления this.poly.setPath(path)

2. @duncan path.removeAt(event.edge) не работает. И this.poly.setPath(path) не обновляет путь с или без path.removeAt(event.edge)

Ответ №1:

Это работает для меня, но без просмотра вашего полного кода, который показывает нам, что this.polygon и this.insidePolygon как выглядит, трудно диагностировать.

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<style type="text/css">
html,body { height: 100%; margin: 0; padding: 0 }
#map { width:800px; height:640px }
</style>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
    var MapClass = class {
        constructor() {
            this.map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: {lat: 51.476706, lng: 0},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
        }
        
        drawPentagon() {
            var coords = [
                new google.maps.LatLng(51.474821, -0.001935),
                new google.maps.LatLng(51.474647, 0.003966),
                new google.maps.LatLng(51.477708, 0.004073),
                new google.maps.LatLng(51.479753, 0.000468),
                new google.maps.LatLng(51.477654, -0.002192)
            ];
            
            this.poly = new google.maps.Polygon({
                paths: coords,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 10,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                map: this.map,
                draggable: true,
                editable: true
            });
        }
        
        addEventListeners() {
            window.google.maps.event.addListener(
                this.poly,
                "mouseup",
                (event) => {
                    if (this.insidePolygon(event.latLng)) {
                        const path = this.poly.getPaths().getAt(event.path);
                        if (event?.vertex >= 0) { //returns true if vertex is being dragged
                            path.removeAt(event.vertex); // removes the current vertex
                        } else if (event?.edge >= 0) { //returns true if edge is being dragged
                            path.removeAt(event.edge); // does not remove the current edge
                        }
                    } else {
                        this.calcAreaAndLatlng();
                    }
                }
            );
        }
        
        insidePolygon(latLng) {
            console.log('insidePolygon', latLng);
            return true;
        }
        
        calcAreaAndLatlng() {
            console.log('calcAreaAndLatlng');
        }
    };
    
    function initialize() {
        var map = new MapClass();
        
        map.drawPentagon();
        map.addEventListeners();
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

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

1. Я попытался опубликовать это как выполняемый фрагмент кода, но продолжал получать предупреждения безопасности от Google Maps о попытке прикрепить прослушиватель событий, не зная, почему

2. Я все еще сталкиваюсь с той же проблемой. Не уверен, что это как-то связано с моим this.poly . Теперь я пытаюсь решить эту проблему, используя другой подход, я дам вам знать, смогу ли я решить эту проблему. Если возможно, пожалуйста, поделитесь своей ссылкой на jsfiddle.