Início / user-460114

user460114's questions

Martin Hope
user460114
Asked: 2025-04-07 23:45:09 +0800 CST
  • 5

O código existente, a seguir, não percorre os elementos HTML do gmp-map para adicionar marcadores. Ele apenas adiciona um marcador a um deles. É necessário um loop, seja no próprio HTML ou via JavaScript.

<body>
    <cfoutput>
        <gmp-map
            center="#vLat#,#vLng#"
            zoom="10"
            map-id="DEMO_MAP_ID"
            style="height: 400px"
        >
        <cfloop query="qNearbyTradies">
            <gmp-advanced-marker
                position="#lat#,#lng#"
                title="#company_name# - #sublocality#, #locality#"
                gmpClickable=true
            ></gmp-advanced-marker>
        </cfloop>
    </cfoutput>
</body>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=[KEY]&libraries=maps,marker&v=beta" async defer></script>
      
    
<script>
    async function initMap() {
        // I assume a javascript loop would begin here somewhere
        const m = document.querySelector("gmp-advanced-marker");
        m.addListener("click", ({ domEvent, latLng }) => {
            const { target } = domEvent;
            const infoWindow = new google.maps.InfoWindow;
            infoWindow.close();
            infoWindow.setContent(m.title);
            infoWindow.open(m.map, m);
        });
    }
    
    window.initMap = initMap;
</script>

Escrevi um código que gera um conjunto de empresas em JavaScript, mas depois de decidir gerar o mapa em HTML, já tenho um loop no código HTML e faria sentido gerar todos os eventos clicáveis ​​dentro desse loop, se possível. Estou procurando dicas de como fazer isso.

google-maps