[英]Google maps javascript implementation with form post of address to geocoder
因此,我在尝试使用JavaScript时尝试将其作为测试用例来实现。 我有一个网站,用户在其中输入地址,然后从Google获取纬度/经度,然后获取以该位置为中心的地图。
问题是我的感觉是这样,但是在调试过程中,它得到了地图,然后似乎又回到了主页并在尘埃落定时进行“首次访问”外观。 无论如何,这是html(减去我的api密钥)
<!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()
});
添加onsubmit="return false;"
到您的表格。
代码段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.