Javascript 如何将Google地图渲染到Grails视图中_Javascript_Google Maps_Grails_Gsp

Javascript 如何将Google地图渲染到Grails视图中

javascript google-maps grails

Javascript 如何将Google地图渲染到Grails视图中,javascript,google-maps,grails,gsp,Javascript,Google Maps,Grails,Gsp,我正在开发一个web应用程序，它有一个嵌入的地图，设置为LatLong，但我无法将它渲染到我的GSP视图中。这是我的普惠制代码： <%@ page import="cr.consultingservices.DA.Avaluo" %> <!DOCTYPE html> <html> <head> <meta name="layout" content="main"> <g:set var="

我正在开发一个web应用程序，它有一个嵌入的地图，设置为LatLong，但我无法将它渲染到我的GSP视图中。这是我的普惠制代码：

<%@ page import="cr.consultingservices.DA.Avaluo" %>
<!DOCTYPE html>
<html>

    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message(code: 'avaluo.label', default: 'Avaluo')}" />
        <title><g:message code="default.show.label" args="[entityName]" /></title>

        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            #map {
                height: 100%;
                overflow:visible;
                background-color:black;
            }
    </style>

    </head>
    <body>
        <a href="#show-avaluo" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
        <div class="nav" role="navigation">
            <ul>
                <li><a class="home" href="${createLink(uri: '/')}"><g:message code="Home"/></a></li>
                <li><g:link class="list" action="index"><g:message code="Mis avaluos" args="[entityName]" /></g:link></li>
                <li><g:link class="create" action="create"><g:message code="Crear avaluo" args="[entityName]" /></g:link></li>
            </ul>
        </div>
        <div id="show-avaluo" class="content scaffold-show" role="main">
            <h1 style="color:#0B77B8"><g:message code="Mi avaluo" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message" role="status">${flash.message}</div>
            </g:if>
            <ol class="property-list avaluo">

                <g:if test="${avaluoInstance?.descripcion}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="descripcion-label" class="property-label"><g:message code="avaluo.descripcion.label" default="Descripcion" /></span>

                        <span class="property-value" aria-labelledby="descripcion-label"><g:fieldValue bean="${avaluoInstance}" field="descripcion"/></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.latitud}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="latitud-label" class="property-label"><g:message code="avaluo.latitud.label" default="Latitud" /></span>

                        <span class="property-value" aria-labelledby="latitud-label"><g:fieldValue bean="${avaluoInstance}" field="latitud"/></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.longitud}">
                <li class="fieldcontain">
                    <span  style="color:#939598" id="longitud-label" class="property-label"><g:message code="avaluo.longitud.label" default="Longitud" /></span>

                        <span class="property-value" aria-labelledby="longitud-label"><g:fieldValue bean="${avaluoInstance}" field="longitud"/></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.provincia}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="provincia-label" class="property-label"><g:message code="avaluo.provincia.label" default="Provincia" /></span>

                        <span class="property-value" aria-labelledby="provincia-label">${avaluoInstance?.provincia?.encodeAsHTML()}</span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.canton}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="canton-label" class="property-label"><g:message code="avaluo.canton.label" default="Canton" /></span>

                        <span class="property-value" aria-labelledby="canton-label">${avaluoInstance?.canton?.encodeAsHTML()}</span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.otrasSenas}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="otrasSenas-label" class="property-label"><g:message code="avaluo.otrasSenas.label" default="Otras Senas" /></span>

                        <span class="property-value" aria-labelledby="otrasSenas-label"><g:fieldValue bean="${avaluoInstance}" field="otrasSenas"/></span>

                </li>
                </g:if>

                <script>
                var map;
                function initMap() {
                  map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                  });
                }
                </script>
                <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATyoneVleIc_TNlkML6km1YfLw_LxO99Q&callback=initMap"
                async defer></script>



                <li class="fieldcontain">
                    <span style="color:#939598" id="map-label" class="property-label"><g:message code="mapa" default="Mapa" /></span>
                    <div id="map">
                    </div>
                </li>


                <g:if test="${avaluoInstance?.creador}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="creador-label" class="property-label"><g:message code="avaluo.creador.label" default="Creador" /></span>

                    <span class="property-value" aria-labelledby="creador-label"><g:link controller="usuario" style="color:black;" action="show" id="${avaluoInstance?.creador?.id}">${avaluoInstance?.creador?.encodeAsHTML()}</g:link></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.comentarios}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="comentarios-label" class="property-label"><g:message code="avaluo.comentarios.label" default="Comentarios" /></span>

                        <g:each in="${avaluoInstance.comentarios}" var="c">
                        <span class="property-value" aria-labelledby="comentarios-label"><g:link controller="comentario" action="show" id="${c.id}">${c?.encodeAsHTML()}</g:link></span>
                        </g:each>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen1}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen1-label" class="property-label"><g:message code="Imagen 1" default="Imagen 1" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen2}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen2-label" class="property-label"><g:message code="Imagen 2" default="Imagen 2" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen3}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen3-label" class="property-label"><g:message code="Imagen 3" default="Imagen 3" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen4}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen4-label" class="property-label"><g:message code="Imagen 4" default="Imagen 4" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen5}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen5-label" class="property-label"><g:message code="Imagen 5" default="Imagen 5" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen6}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen6-label" class="property-label"><g:message code="Imagen 6" default="Imagen 6" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen7}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen7-label" class="property-label"><g:message code="Imagen 7" default="Imagen 7" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen8}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen8-label" class="property-label"><g:message code="Imagen 8" default="Imagen 8" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen9}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen9-label" class="property-label"><g:message code="Imagen 9" default="Imagen 9" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.imagen10}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="imagen10-label" class="property-label"><g:message code="Imagen 10" default="Imagen 10" /></span>

                </li>
                </g:if>

                <g:if test="${avaluoInstance?.valorEstimado}">
                <li class="fieldcontain">
                    <span style="color:#939598" id="valorEstimado-label" class="property-label"><g:message code="avaluo.valorEstimado.label" default="Valor Estimado" /></span>

                        <span class="property-value" aria-labelledby="valorEstimado-label"><g:fieldValue bean="${avaluoInstance}" field="valorEstimado"/></span>

                </li>
                </g:if>

            </ol>
            <g:form url="[resource:avaluoInstance, action:'delete']" method="DELETE">
                <fieldset class="buttons">
                    <g:link class="edit" action="edit" resource="${avaluoInstance}"><g:message code="Editar" default="Edit" /></g:link>
                    <g:actionSubmit class="delete" action="delete" value="Borrar avaluo" onclick="return confirm('${message(code: 'Esta seguro?', default: 'Esta seguro?')}');" />
                </fieldset>
            </g:form>
        </div>
    </body>
</html>


#地图{
身高：100%；
溢出：可见；
背景色：黑色；
}





${flash.message}







${AvaloInstance？.provincia？.encodeAsHTML（）}


${AvalooInstance？.canton？.encodeAsHTML（）}



var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}



${avaloInstance？.creador？.encodeAsHTML（）}


${c？.encodeAsHTML（）}

如您所见，我甚至没有删除

Google

示例纬度和经度，以检查它是否与我的坐标有关。
我知道脚本没有放在视图的最佳位置，但我只是把它放在那里以便更好地理解。发生的情况是，它只是变为空白，没有显示错误或什么都没有。

我对

Grails

和

Javascript

有点陌生，所以我非常感谢您的帮助。提前谢谢

加载页面后，必须调用

initMap（）

函数。现在它只是初始化，但从未执行
在初始化initMap之后（在脚本标记结束之前）添加此项。

window.addEventListener（'load'，initMap，false）

如果我想在两个字段的文本更改后加载映射呢？那么您应该使用javascript检查文本字段更改。查看是否希望用户在其中写入内容，然后进行初始化。如果我的帖子已经回答了你最初的问题，如果你接受了答案，那就太好了。如果是的话，我当然会：）好吧。。是的如果答案有效，接受它。如果没有，请解释什么不起作用。老实说，我还没有尝试过，所以一旦我尝试过，我会对此做出回应。“我保证，我不会忘记我想你忘了。”查理·麦克尔维谢谢你提醒我。我确实忘了，但答案确实有用。现在接受。谢谢