利用百度地图API根据地址查询经纬度

传上来只是为了记录下三种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>
 

posted on 2016-12-05 17:54  LarryZeal  阅读(3381)  评论(0)  编辑  收藏  举报

导航