zoukankan      html  css  js  c++  java
  • 用百度地图做了一个输入地址查询经纬度的小例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js"></script>
    </head>
    <body>
    <input type="text" id="input"></br>
    <button id="button">提交</button></br>
    <div id="weidu"></div>
    
    <script>
        $('#button').click(function(){
            aa($("#input").val());
        })
    function aa(pa){
        var ak='sHdjv4dss0iGfAOBZR3matdffwQ5jPpMfRDq0';//百度地图的密钥
        var url="http://api.map.baidu.com/geocoder/v2/?output=json&ak="+ak+"&address="+pa;
        //跨域ajax请求
        jsonp(url);
        function back(a){return a}
        function jsonp(url){
            $.ajax({
                url:url,                              //跨域到http://www.wp.com,另,http://test.com也算跨域
                type:'GET',                             //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
                dataType:'jsonp',                      //指定为jsonp类型
                data:{},           //数据参数
                jsonp:'callback',                      //服务器端获取回调函数名的key,对应后台有$_GET['callback']='back';callback是默认值
                jsonpCallback:'back',                  //回调函数名
                success:function(result){               //成功执行处理,对应后台返回的back(data)方法。
                    var str="经度:"+result.result.location.lng+"*****纬度:"+result.result.location.lat+"*****级别:"+result.result.level
                    $("#weidu").html(str)
    
                },
                error:function(msg){
                    //执行错误
                    console.log(msg)
                }
            });
        }
    }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    4.28
    12.27
    12.24
    ———————————关于一些加密博文!——————————
    博客创办目的——————欢迎相互学习
    7-14 最短工期
    指针的浅谈用于初学者
    知识点扫盲加基本板子总结
    优质文章推荐,长期更新
    杭州电子科技大学2018多校测试第一场
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6638757.html
Copyright © 2011-2022 走看看