2012-03-28 5 views
0

おはよう/午後/夕方はここが問題です。私はそれが実際に完全に動作する登録GSPを作っているが、私がする必要があるのは、ユーザーがアドレスを挿入した後、それに応じてGoogleマップAPIで作成された地図にマーカーを追加することである。地図は実際にはうまく動作していますが、すでにマーカーがありますが、都市の経度と緯度を入れて、すべてのレジスタに別の住所があり、マーカーはその住所でなければなりません。アドレスを挿入した直後にボタンをクリックしたり、ページを読み込んだりしたり、何も挿入せずにすぐに追加してください。これは私が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機能を挿入するが、それは誰もが助けることができる、私はアドレスを呼び出し、マーカーに変換する方法がわからない、私を助けていません私はどうですか?

答えて

0

私はいつも私自身の質問に答えるのを終えるので、体はここで私を助けません!これは私がしたことのコードです。誰かがアドレスを入力した直後に、ボタンをクリックせずにマップにポイントを追加したかったのです。私はいくつかの間違いを見つけました。なぜなら、番号(私の都市と国がメデリン - コロンビアであることを知っておく必要があります)だけを追加すると、私の国ではなく他の場所にマーカーが置かれるからです。だから私は都市と国を選ぶために2つのボックスを追加しなければなりませんでした(それは後に変わり、より多くの都市と国を追加しました。今は都市と国が1つだけです)。さて、あなたがそれを必要とすればあなたのコードはここにあります!それが誰にとっても役立つことを願っています。 :)

<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>