早上好/下午好/晚上好友这就是事情。我正在制作一个注册gsp,它实际上工作得很完美,但我需要做的是,在用户插入地址后,根据它在谷歌地图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…" /></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 :(得分:0)
在一天结束时,我总是完成回答我自己的问题,因为没有身体在这里帮助我!这是我所做的代码。我想在没有点击任何按钮的情况下在地图中添加一个点,就在有人点击地址之后。我发现了一些错误,因为如果我只添加数字(你必须知道我的城市和国家是麦德林 - 哥伦比亚),它会将标记放在其他地方但不在我的国家。所以我不得不再添加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…" /></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>