• jQuery通过地址获取经纬度demo


    在开始之前,首先需要登录百度地图API控制台申请密钥ak。

    1、登录百度地图开放平台http://lbsyun.baidu.com

    注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用。

    应用类型选择:“服务器端”,IP白名单:0.0.0.0/0

    点击提交。会生成一个访问应用(AK)。

    2、编写界面。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="robots" content="noindex, nofollow">  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
            <!-- 引入jquery-->
            <script src="./js/jquery-1.7.2.min.js"></script>
        </head>
        <body>
            address:<input type="text"  name="address" id="address"  style="30%">
          <br>
    point:<input type="text" name="point" id="point" style="30%" readonly> <button type="button" id="open">getPoint</button> </body> </html>

    3.核心方法

     <script type="text/javascript">  
          document.getElementById('open').onclick = function () {  
            var addressStr = $("#address").val();
            if(addressStr!=""){
                $.ajax({
                    url: "http://api.map.baidu.com/geocoder/v2/", 
                    data: {"address": addressStr, "output":"json", "ak":"刚才你申请的ak"},
                    type: "post",
                    dataType:'JSONP',
                    success :function(data){
                        var lng = data.result.location.lng;
                        var lat = data.result.location.lat;
                        $("#point").val(lng+","+lat);
                    }
                });
                
                
            }else{
                alert("addres is not null!");
            }
        }  
    </script>

    4.效果展示:

    当没有输入地址,提示:

  • 相关阅读:
    Java实现批量下载《神秘的程序员》漫画
    mysql远程连接:ERROR 1130 (HY000): Host '*.*.*.*' is not allowed to connect to this MySQL server解决办法
    opencv学习_15 (利用cmake查看opencv的源码)
    jobs 命令
    中断子系统6_中断嵌套处理
    JPA一对多映射
    JPA Map映射
    JPA集合映射
    JPA删除实体
    JPA查找实体
  • 原文地址:https://www.cnblogs.com/klslb/p/7229171.html
Copyright © 2020-2023  润新知