传上来只是为了记录下三种jsonp方式,$.get(url, callback)方式不行,会出错 -- 必须指明返回类型为”json”才行。
或者使用$.getJSON()或者$.ajax({})。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../favicon.ico"> --> <title>经纬度坐标查询</title> <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- <script src="../../assets/js/ie-emulation-modes-warning.js"></script> -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head> <body> <div class="container"> <form class="form-signin" role="form">
<h2 class="form-signin-heading">经纬度坐标查询</h2>
<input type="text" class="form-control" id="address" placeholder="Address" required autofocus>
<input type="text" class="form-control" id="location" placeholder="Location" readonly> <button class="btn btn-lg btn-primary btn-block" type="button">查询</button>
</form> </div> <!-- /container --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script>
$(function(){
$(".btn").on('click',function(){
var ak="你的密钥";
var url = "http://api.map.baidu.com/geocoder/v2/?address="+$("#address").val()+"&output=json&ak="+ak+"&callback=?"; //$.getJSON(url, function(data){ //使用$.get()会报错,get不支持jsonp吗?不是不支持,而是默认非json格式吧
$.get(url, function(data){ //使用$.get()会报错,必须指定返回类型为json方可!
// alert(JSON.stringify(data))
$("#location").val(data.result.location.lat + ', '+data.result.location.lng); }, "json"); // 必须指定返回类型为json方可! /*$.ajax({ // 这样可以
url: "http://api.map.baidu.com/geocoder/v2/",
jsonp: "callback",
dataType: "jsonp",
data: {
address: $("#address").val(),
output:"json",
ak:ak
}, // Work with the response
success: function( response ) {
console.log( response.result.location ); // server response
$("#location").val(response.result.location.lat +','+response.result.location.lng);
}
});*/
}); });
</script>
</body>
</html>