Управление событиями SVG и SVG внутри Google Maps API (наложение карты svg) - PullRequest
0 голосов
/ 28 мая 2020

Я создал карту Google с наложением SVG. Она отлично работает и выравнивается. Однако у меня есть некоторые события onclick, mouseover и другие внутри файла svg. Когда я нажимаю элемент внутри файла svg, загруженного с помощью Google Maps Api Overlay, ничего не происходит.

Есть ли способ достичь sh этого? Есть ли способ манипулировать svg после его загрузки в Google Maps в виде наложения?

<div class="content">
        <div id="map"></div>
        <div class="actions">
            <button id="btnMapGetCenterCoordinates" type="button">Mostrar coordenadas</button>
            <span id="mapConfigEl"></span>
            <button id="btnLoadSvg" type="button">Carregar SVG</button>
        </div>
      </div>
<script>
        $(function() {
            function mapGetConfig() {
                let lat = map.getCenter().lat();
                let lng = map.getCenter().lng();
                let zoom = map.getZoom();
                return { lat, lng, zoom };
            }

            function mapLoadSvg() {
                let bounds = {
                    north: map.getBounds().getNorthEast().lat(),
                    south: map.getBounds().getSouthWest().lat(),
                    east: map.getBounds().getNorthEast().lng(),
                    west: map.getBounds().getSouthWest().lng()
                };

                const overlay = new google.maps.GroundOverlay('map.svg', bounds);
                overlay.setMap(map);
            }

            let mapConfigEl = document.querySelector('#mapConfigEl');
            let btnMapGetCenterCoordinates = document.querySelector('#btnMapGetCenterCoordinates');
            btnMapGetCenterCoordinates.addEventListener('click', function (e) {
                let mapConfig = mapGetConfig();
                mapConfigEl.innerHTML = `lat: ${mapConfig.lat}<br>lnt: ${mapConfig.lng}<br>zoom: ${mapConfig.zoom}`;
            });

            let btnLoadSvg = document.querySelector('#btnLoadSvg');
            btnLoadSvg.addEventListener('click', function (e) {
                mapLoadSvg();
            });
        });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...