Удаление полигона при использовании Google Maps API

У меня есть простая карта Google с двумя определенными полигонами, которые видны при загрузке страницы.

Я пытался добавить кнопки для отключения многоугольника с помощью ".setMap(null)", но у меня это не работает.

Можете ли вы предложить исправление? Мне кажется, что я недостаточно знаю без посторонней помощи. (вам понадобится ключ API Карт Google — извините!).

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8" />
<title>Triangles</title>
<script type = "text/javascript" src = "http://maps.google.com/maps/api/js?key=<MAPS KEY GOES HERE>"></script>
<script type = "text/javascript">

function initialize() {
// Initialize a new map:
   const myLatLng = new google.maps.LatLng(55.73,-6.25);  // Center Point of map
   const myOptions = { zoom: 10, center: myLatLng, mapTypeId: google.maps.MapTypeId.HYBRID }; // Map options
   const map = new google.maps.Map(document.getElementById('map'), myOptions); // create "map"
// Define & draw a yellow triangle polygon:
   var yellowCoords = [ { lat: 55.828897, lng: -6.398249 }, { lat: 55.835067, lng: -6.126337 }, { lat: 55.674712, lng: -6.305552 } ];
   var yellowPolygon = new google.maps.Polygon({ paths: yellowCoords, strokeColor: 'yellow', strokeOpacity: .7, strokeWeight: 2, fillColor: 'yellow', fillOpacity: 0.2 });
   yellowPolygon.setMap(map);
// Define & draw a red triangle polygon:
   var redCoords = [ { lat: 55.668897, lng: -6.198249 }, { lat: 55.835067, lng: -6.026337 }, { lat: 55.674712, lng: -6.005552 } ];
   var redPolygon = new google.maps.Polygon({ paths: redCoords, strokeColor: 'red', strokeOpacity: .7, strokeWeight: 2, fillColor: 'red', fillOpacity: 0.2 });
   redPolygon.setMap(map);

} // end function initialize

function yellowOff() {
  yellowPolygon.setMap(null);
}
function redOff() {
  redPolygon.setMap(null);
}

</script>
<style> #map { height: 800px; width: 800px; }</style>
</head>

<body onLoad = "initialize();">

<div id = "map"></div>
<button onClick = "javascript:yellowOff();" value = "Click">Yellow Off</button>
<button onClick = "javascript:redOff();" value = "Click">Red Off</button>
</body>
</html>

Спасибо!

У вас очевидная проблема с масштабом. Ваша консоль Javascript говорит вам об этом. Uncaught ReferenceError: redPolygon не определен (то же самое для желтого). Вы не можете объявлять переменные внутри функции initialize и использовать эти переменные вне ее (в других ваших функциях).

— 22.11.2022 10:01

stackoverflow.com/questions/500431/…

— 22.11.2022 13:04

javascript html google-maps

22.11.2022 09:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласно комментарию @MrUpsideDown относительно «Scope», вы можете либо определить эти переменные как глобальные и заполнить их функцией initialize, либо сохранить все, что содержится в этой функции initialize, как показано ниже. Кроме того, сохранение одной переменной (в данном случае объектного литерала), которая содержит ссылки на различные полигоны (или другие элементы), позволит упростить манипулирование ими при вызове функции, которая запускается кнопками.

Кнопки здесь будут toggle отображать полигоны, а не просто скрываться навсегда, но для постоянного скрытия требуется лишь небольшое изменение в обратном вызове clickhandler.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv = "content-type" content = "text/html; charset=UTF-8" />
        <title>Triangles</title>
        <style>
            #map{
                width:100%;height:90vh
            }
        </style>
    </head>
    <body>
        <div id = "map"></div>
        <button type='button' data-colour='yellow'>Yellow Off</button>
        <button type='button' data-colour='red'>Red Off</button>
        
        <script>
            function initialize(){
                const polygons = {};
                const myLatLng=new google.maps.LatLng(55.73,-6.25);
                const myOptions = { 
                    zoom: 10,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                const map = new google.maps.Map( document.getElementById('map'), myOptions );
                
                let yellowCoords = [ { lat: 55.828897, lng: -6.398249 }, { lat: 55.835067, lng: -6.126337 }, { lat: 55.674712, lng: -6.305552 } ];
                let yellowPolygon = new google.maps.Polygon({ paths: yellowCoords, strokeColor: 'yellow', strokeOpacity: .7, strokeWeight: 2, fillColor: 'yellow', fillOpacity: 0.2 });
                    yellowPolygon.setMap( map );

                let redCoords = [ { lat: 55.668897, lng: -6.198249 }, { lat: 55.835067, lng: -6.026337 }, { lat: 55.674712, lng: -6.005552 } ];
                let redPolygon = new google.maps.Polygon({ paths: redCoords, strokeColor: 'red', strokeOpacity: .7, strokeWeight: 2, fillColor: 'red', fillOpacity: 0.2 });
                    redPolygon.setMap(map);
                    
                polygons.yellow=yellowPolygon;
                polygons.red=redPolygon;
                
                const clickhandler=(e)=>{
                    let poly=polygons[e.target.dataset.colour]
                        poly.setMap( poly.getMap() ? null : map )
                }
                
                document.querySelectorAll('button[type = "button"][data-colour]').forEach( bttn=>bttn.addEventListener('click',clickhandler) )
            }
        </script>
        <script src = "//maps.google.com/maps/api/js?key=KEY&callback=initialize"></script>       
    </body>
</html>

jsFiddle чтобы показать результат

22.11.2022 10:30