谷歌映射JavaScript地址解析器的地址表单的形式 [英] Google maps javascript implementation with form post of address to geocoder
本文介绍了谷歌映射JavaScript地址解析器的地址表单的形式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题是我感觉就像我那样做，但是当我调试它时，它会得到地图，然后似乎恢复到主页面，并在尘埃落定时进行第一次访问查看。无论如何，这里是html（减去我的api键）
<！DOCTYPE html>
< html>
< head>
< script src =http://code.jquery.com/jquery-1.10.2.min.js>< / script>
< link rel =stylesheettype =text / csshref =Project2.css>
< script src =jsfile.js>< / script>
< / head>
< body>
< Form class =leftStuff>
< label for =address>地址：< / label>
< input type =textid =addrQueryname =address/>
< button onclick ='BeenClicked（）'>添加< / button>
< / Form>
< div id =parent>
< div id =sidebuttons>
< ul id =rctSearchList>
< / ul>
< / div>
< div id =mapHolderclass =leftStuff>
< div id =map>< / div>
< / div>
< / div>
< script async defer
src =https://maps.googleapis.com/maps/api/js?callback=initMap>
< / script>
< / body>
< / html>
//开始jsfile.js
函数initMap（）{
var map;
if（$（'＃rctSearchList'）。children（）。length< = 0）
{
map = new google.maps.Map（document.getElementById（'map'） ，{
center：{lat：41.08394699999999，lng：-74.176609}，
zoom：8
}）;
}
else
{
var lat = $（'＃rctSearchList li：last-child'）。data（'coords'）。lat;
var lng = $（'＃rctSearchList li：last-child'）。data（'coords'）。lng;
console.log（lat）;
map = new google.maps.Map（document.getElementById（'map'），{
center：{lat：lat，lng：lng}，
zoom：8
}）;
函数BeenClicked（）
{
var address = document.getElementById（'addrQuery'）.value;
//用加号替换每个空格
address = address.replace（/ / g，'+'）;
//从Google $ b $获取json文档var url =http://maps.googleapis.com/maps/api/geocode/json?address=+ address +& amp ;传感器=假;
var jax = $ .get（url，function（data，status）{
var latitude = data.results [0] .geometry.location。 lat
var longitude = data.results [0] .geometry.location.lng;
address = data.results [0] .formatted_address;
var str =< li>+ address +< / li>;
var li = $（str）;
li.data（coords，{lat：latitude，lng：longitude }）;
li.css（background-color：gray）;
$（＃rctSearchList）。append（ li）;
initMap（）
}）;
解决方案
添加 onsubmit =return false;到您的表单中。
代码片段：
函数initMap（）{var map; if（$（'＃rctSearchList'）。children（）。length< = 0）{map = new google.maps.Map（document.getElementById（'map'），{center：{lat：41.08394699999999，lng： - 74.176609}，zoom：8}）; } else {var lat = $（'＃rctSearchList li：last-child'）。data（'coords'）。lat; var lng = $（'＃rctSearchList li：last-child'）。data（'coords'）。lng;的console.log（LAT）; map = new google.maps.Map（document.getElementById（'map'），{center：{lat：lat，lng：lng}，zoom：8}）; }} google.maps.event.addDomListener（window，'load'，initMap）;函数BeenClicked（）{var address = document.getElementById（'addrQuery'）。value; //用加号替换每个空格地址= address.replace（/ / g，'+'）; //从google获取json文档var url =http://maps.googleapis.com/maps/api/geocode/json?address=+ address; var jax = $ .get（url，function（data，status）{var latitude = data.results [0] .geometry.location.lat var longitude = data.results [0] .geometry.location.lng; address = data .results [0] .formatted_address; var str =< li>+ address +< / li>; var li = $（str）; li.data（coords，{lat：latitude，lng ：longitude}）; li.css（background-color：gray）; $（＃rctSearchList）。append（li）; initMap（）}）;}
html，body，＃parent，＃mapHolder，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
So I'm trying to implement something as a test case as I play around with JavaScript. I have a site where a user enters in an address then I get the latitude/longitude from google, then get a map based centered on that location.
Problem is I feel as I did that, but as I go through my debugging of it, it gets the map, then seems to revert back to the main page and stock "first visit" look when the dust settles. Anyway, here's the html (minus my api key)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "Project2.css">
<script src = "jsfile.js"></script>
</head>
<body>
<Form class = "leftStuff">
<label for = "address">Address:</label>
<input type = "text" id = "addrQuery" name = "address"/>
<button onclick='BeenClicked()'>Add</button>
</Form>
<div id="parent">
<div id = "sidebuttons">
<ul id ="rctSearchList">
</ul>
</div>
<div id="mapHolder" class = "leftStuff">
<div id="map"></div>
</div>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
//begin jsfile.js
function initMap() {
var map;
if($('#rctSearchList').children().length <= 0)
{
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:41.08394699999999, lng: -74.176609},
zoom: 8
});
}
else
{
var lat = $('#rctSearchList li:last-child').data('coords').lat;
var lng = $('#rctSearchList li:last-child').data('coords').lng;
console.log(lat);
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:lat, lng: lng},
zoom: 8
});
}
}
function BeenClicked()
{
var address = document.getElementById('addrQuery').value;
//replace each space with a plus sign
address = address.replace(/ /g, '+');
//get the json document from google
var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";
var jax = $.get(url, function(data, status){
var latitude = data.results[0].geometry.location.lat
var longitude = data.results[0].geometry.location.lng;
address = data.results[0].formatted_address;
var str = "<li>" + address + "</li>";
var li = $(str);
li.data( "coords", {lat :latitude, lng : longitude });
li.css("background-color : gray");
$("#rctSearchList").append(li);
initMap()
});
解决方案
Add onsubmit="return false;" to your form.
code snippet:
function initMap() {
var map;
if ($('#rctSearchList').children().length <= 0) {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 41.08394699999999,
lng: -74.176609
},
zoom: 8
});
} else {
var lat = $('#rctSearchList li:last-child').data('coords').lat;
var lng = $('#rctSearchList li:last-child').data('coords').lng;
console.log(lat);
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: lat,
lng: lng
},
zoom: 8
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);
function BeenClicked() {
var address = document.getElementById('addrQuery').value;
//replace each space with a plus sign
address = address.replace(/ /g, '+');
//get the json document from google
var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address;
var jax = $.get(url, function(data, status) {
var latitude = data.results[0].geometry.location.lat
var longitude = data.results[0].geometry.location.lng;
address = data.results[0].formatted_address;
var str = "<li>" + address + "</li>";
var li = $(str);
li.data("coords", {
lat: latitude,
lng: longitude
});
li.css("background-color : gray");
$("#rctSearchList").append(li);
initMap()
});
}
html,
body,
#parent,
#mapHolder,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Form class="leftStuff" onsubmit="return false;">
<label for="address">Address:</label>
<input type="text" id="addrQuery" name="address" value="New York, NY" />
<button onclick='BeenClicked()'>Add</button>
</Form>
<div id="parent">
<div id="sidebuttons">
<ul id="rctSearchList"></ul>
</div>
<div id="mapHolder" class="leftStuff">
<div id="map"></div>
</div>
</div>
这篇关于谷歌映射JavaScript地址解析器的地址表单的形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
