Добавить точку на карте, не возвращаясь к контроллеру и не перезагружая страницу - PullRequest
0 голосов
/ 29 марта 2012

Доброе утро / день / вечер, ребята. Вот в чем дело. Я делаю регистрационный gsp, что он на самом деле работает отлично, но мне нужно, чтобы после того, как пользователь вставил адрес, в зависимости от него добавьте маркер на карту, созданную с помощью API Google Maps. Карта на самом деле работает просто отлично, и у нее уже есть маркер, но я указываю ее по долготе и широте моего города, у каждого регистра будет свой адрес, и этот маркер должен быть этим адресом, но я просто не могу найти способ добавьте его сразу после вставки адреса, без нажатия какой-либо кнопки, перезагрузки страницы или чего-либо еще, только после вставки. это код, который я имею на GSP:

<html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="message(code: 'createPromo.label', default: 'CreatePromo')}" />
        <title><g:message code="default.create.label" args="[entityName]" /></title>
        <meta name="viewport" content="initial-scale=1.0 user-scalable=no" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false ></script>
        <g:javascript>
            var directionService = new google.maps.DirectionsService();
            var directionDisplay;
            function initialize(){
                var latlng = new google.maps.LatLng(6.20717, -75.565776);
                directionDisplay = new google.maps.DirectionsRenderer();
                var settings = {
                    zoom: 15,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.MAP},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas", settings);
                directionDisplay.setMap(map);
                /*var contentString = '<div id="content">'+
                         '<div id="siteNotice">'+
                         '<div>'+
                         '<h1 id="firstHeading" class="firstHeading">Qtag Technologies</h1>'+
                         '<div id="bodyContents">'+
                         '<p>Put your address here</p>'+
                         '<form id="mapping" action="#">'+
                         '<input id="start" type="text" />'+
                         '<input id="end" type="text" />'+
                         '<input type="submit" value="add point" id="hola" /></form>'+
                         '</div>'+
                         '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString,
                    maxWidth: 300
                });*/
                marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: latlng
                });
                function toogleBounce(){
                    if(marker.getAnimation() != null){
                        marker.setAnimation(null);
                    }else{
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                    }
                }
                google.maps.even.addListener(marker, 'click', toogleBounce);
                function enviaDir(){
                    document.mapping.submit();
                }
                /*function calcRoute(){
                    var start = document.getElementById("start").value;
                    var end = document.getElementById("end").value;
                    var request = {
                        origin: start, 
                        destination: end,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };
                    directionsService.route(request, function(response, status){
                        if(status == google.maps.DirectionsStatus.OK){
                            directionDisplay.setDirections(response);
                        }
                    });
                 }*/
                 function submitFunction(){
                     document.mapping.submit();
                 }
                 /*$("#hola").live('click', function(w){
                     w.preventDefault();
                     calcRoute(); 
                 });
              }
        </g:javascript>                                       
    <head>
    <body>
       <a href="#create-createPromo" class="skip" tabindex="1"><g:message code="default.link.skip.label" default="Skipt to content&hellip;" /></a>
       <div class="nav" role="navigation">
           <ul>
              <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label" /></a></li>
              <li><g:link class="list" action="list"><g:message code="defaul.list.label" args="[entityName]" /></g:link></li>
           </ul>
       </div>
       <div id="create-createPromo" class="content scaffold-create" role="main">
       <h1><g:message code="default.create.label" args="[entityName]" /></h1>
       <g:if test="${flash.message}">
          <div class="message" role="status">${flash.message}</div>
       </g:if>
       <g:hasErrors bean="${createPromoInstance}">
       <ul class="errors" role="alert">
           <g:eachError bean="${createPromoInstance} var="error">
               <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}" /></li>
           </g:eachError>
       </ul>
       </g:hasErrors>
       <g:form action="save" >
           <div id="content1" >
               <fieldset class="form">
                   <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field:'storeName', 'error')} required">
                       <label for="storeName">
                           <g:message code="createPromo.storeName.label" default="Store Name" />
                           <span class="required-indicator>*</span>
                       </label>
                       <g:textField name="storeName" value="${createPromoInstance?.storeName}" />
                   </div>
                   <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'activity', 'error')} required">
                        <label for="activity">
                            <g:message code="createPromo.activity.label" default="Activity" />
                            <span class="required-indicator">*</span>
                        </label>
                        <g:select name="activity" from="${createPromoInstance.constraints.activity.inList}" value=${createPromoInstance?.activity" valueMessagePrefix="createPromo.activity" noSelection="['': '']" />
                   </div>
                   <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'cantArt', 'error')} required">
                       <label for="cantArt">
                           <g:message code="createPromo.art.label" default="cantArt" />
                           <span class="required-indicator">*</span>
                       </label>
                       <g:textField name="cantArt" value="${createPromoInstance?.cantArt}" />
                   </div>
                   <div class="fieldcontain ${hasErrors (bean: createPromoInstance, field: 'art', 'error')} required" >
                        <label for="art">
                            <g:message code="createPromo.art.label" default="Art" />
                            <span class="required-indicator">*</span>
                        </label>
                        <g:textField name="art" value="${createPromoInstance?.art}" />
                    </div>
                    <div class="fieldcontain ${hasErrors (bean: createPromoInstance, field: 'wins', 'error')} ">
                        <label for="wins">
                            <g:message code="createPromo.wins.label" default="Wins" />
                            <span class="required-indicator">*</span>
                        </label> 
                        <g:textField name="wins" value=${createPromoInstance?.wins" />
                    </div>
                    <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'telephone', 'error')}" >
                         <label for="telephone">
                              <g:message code="createPromo.telephone.label" default="Telephone" />
                              <span class="required-indicator">*</span>
                         </label>
                         <g:textField name="telephone" value="${createPromoInstance?.telephone" />
                    </div>
                    <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'address', 'error')}" >
                         <label for="address">
                             <g:message code="createPromo.address.label" default="Address" />
                             <span class="required-indicator">*</span>
                         </label>
                         <g:textField name="address" id="address" value="${createPromoInstance?.address" onblur="initialize();" />
                     </div>
               </fieldset>
          </div>
          <div id="content2">
              <div id="map_canvas" style="width:300px; height: 200px; "></div>
          </div>
          <fieldset class="buttons">
              <g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', defautl: 'Create')}" />
          </fieldset>
       </g:form>
       </div>
    </body>

</html>

Я вставил функцию onblur, но она мне не помогает, я не знаю, как вызвать адрес и преобразовать его в маркер, может кто-нибудь помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 03 апреля 2012

В конце дня я всегда заканчиваю отвечать на свои вопросы, потому что здесь никто не помогает! Это код того, что я сделал. Я хотел добавить точку на карте без нажатия какой-либо кнопки, сразу после того, как кто-то вставил адрес. Я обнаружил некоторые ошибки, потому что, если я добавлю только число (вы должны знать, что мой город и страна - Медельин - Колумбия), это поставит маркер в другом месте, но не в моей стране. Поэтому мне пришлось добавить еще 2 поля для выбора города и страны (это изменится позже, добавив больше городов и стран, сейчас у него только один город и одна страна), и теперь он работает отлично. Ну, теперь вот код для вас, ребята, если вам это нужно! Надеюсь, это будет полезно для всех. :)

<html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message (code: 'createPromo.label', default: 'CreatePromo')}" /> 
        <title><g:message code="default.create.label" args="[entityName]" /></title>
        <meta name="viewport" content="initial-scale=1.0 user-scalable=no" />
        <script type="text/javascript src="http://maps.google.com/maps/api/js?sensor=false" ></script>
        <g:javascript>
              var map;
              var geocoder;
              function initialize(){
                  geocoder = new google.maps.Geocoder();
                  var latlng = new google.maps.LatLng(6.20717, -75.565776);
                  var settings = {
                      zoom: 15,
                      center: latlng,
                      mapTypeControl: true,
                      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                      navigationControl: true,
                      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
                  map = new google.maps.Map(document.getElementById("map_canvas"), settings);
              }
              function codeAddress(){
                  var address = document.getElementById("address").value;
                  var city = document.getElementById("city").value;
                  var country = document.getElementById("country").value;
                  geocoder.geocode({'address': address + ' ' + city + ' - ' + country}, function(results, status){
                      if(status == google.maps.GeocoderStatus.OK){
                           map.setCenter(results[0].geometry.location);
                           var maker = new google.maps.Marker({
                               map: map,
                               position: results[0].geometry.location                               
                           });
                      }else{
                           alert ("Geocoder was not successful for the following reason: " + status);
                      }
                  });
              }
        </g:javascript>                   
    </head>
    <body>
        <a href="#create-createPromo" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;" /></a>
        <div class="nave" role="navigation">
            <ul>
               <li><a class="home" href="${createLink(uri: '/')}><g:message code="default.home.label" /></a></li>
               <li><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></li>
            </ul>
        </div>
        <div id="create-createPromo" class="content scaffold-create" role="main">
            <h1><g:message code="default.create.label" args="[entityName]" /></h1>
            <g:if test="${flash.message}" >
               <div class="message" role="status">${flash.message}</div>
            </g:if>
            <g:hasErrors bean="{createPromoInstance}">
            <ul class="errors" role="alert">
                <g:eachError bean="${createPromoInstance} var="error">
                    <li <g:if test="{error in org.springframework.validation.FieldError}">data-field-id=${error.field}"</g:if>><g:message error="${error}" /></li>
                </g:eachError>
            </ul>
            </g:hasErrors>
            <g:form action="save">
                 <fieldset class="form">
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'storeName', 'error')} ">
                          <label for="storeName">
                              <g:message code="createPromo.storeName.label" default="Store Name" />
                          </label>
                          <g:textField name="storeName" value="${createPromoInstance?.storeName}" id="storeName" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'activity', 'error')} ">
                         <label for="activity">
                             <g:message code="createPromo.activity.label default="Activity" />
                         </label>
                         <g:select name="activity" from="${createPromoInstance.constraints.activity.inList}" value="${createPromoInstance?.activity}" valueMessagePrefix="createPromo.activity" noSelection="['':'']" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'cantArt', 'error')} required">
                          <label for="canArt">
                              <g:message code="createPromo.canArt.label" default="cantArt" />
                              <span class="required-indicator>*</span>
                          </label>
                          <g:textField name="cantArt" value="${createPromoInstance?.cantArt" id="cantArt" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field:'art', 'error')} ">
                          <label for="art">
                              <g:message code="createPromo.art.label" default="Art" />
                          </label>
                          <g:textField name="art" value="${createPromoInstance?.art" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'wins', 'error' )} ">
                          <label for="wins">
                              <g:message code="createPromo.wins.label" default="Wins" />
                          </label>
                          <g:textField name="wins" value="${createPromoInstance?.wins}" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'telephone', 'error')}" >
                          <label for="telephone">
                              <g:message  code="createPromo.telephone.label" default="Telephone" />
                          </label>
                          <g:textField name="telephone" value="${createPromoInstance?.telephone}" />
                     </div>
                     <div class="fielcontain ${hasErrors(bean: createPromoInstance, field: 'city', 'error')} ">
                          <label for="city">
                              <g:message code="createPromo.city.label" default="City" />
                          </label>
                          <g:select name="city" id="city" from="${createPromoInstance.constraints.city.inList}" value="${createPromoInstance?.city}" valueMessagePrefix="createPromo.city" nonSelection="['':'']" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'country', 'error' })" >
                          <label for="country">
                               <g:message code="createPromo.country.label" defuatl="Country" />
                          </label>
                          <g:select name="country" id="country" from="${createPromoInstance.constraints.country,inList}" value="${createPromoInstance?.country}" valueMessagePrefix="createPromo.country" nonSelection="['':'']" />
                     </div>
                     <div class="fieldcontain ${hasErrors(bean: createPromoInstance, field: 'address', 'error' })" >
                          <lable for="address">
                               <g:message code="createPromo.address.label" default="Address" />
                          </label>
                          <g:textField name="address" id="address" value="${createPromoInstance?.address}" onblur="codeAddress()" />
                     </div>
                     <div id="map_canvas" style="width: 300px; height: 200px; ></div>  
                 </fieldset>
            </g:form>
        </div>
    </body>
 </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...