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

利用百度地图API根据地址查询经纬度的更多相关文章

  1. 百度地图API 根据地址查询经纬度

    html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...

  2. 利用百度地图API实现地址和经纬度互换查询

    import json import requests def baiduMap(input_para): headers = { 'User-Agent': 'Mozilla/5.0 (Window ...

  3. 百度地图api根据地址获取经纬度

    package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...

  4. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  5. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  6. 利用百度地图API和群蚁算法，对TSP问题进行模拟与求解

    前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...

  7. 百度地图API地点搜索-获取经纬度

    分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...

  8. 百度地图api通过地址显示地图，白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  9. 批量调用百度地图API获取地址经纬度坐标

    1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...

随机推荐

  1. Java和C++通过Socket通信中文乱码的解决

    理想的开发状态是我开始就是C开发,一直是C的开发,现在还是C的开发,若干年后,幸运的话,我可以成为C语言的高手或者专家…… 更实际的情况是我开始是C开发,后来变成了JAVA开发,然后又做起了VC++的 ...

  2. Spring的三种注入方式（Setter、构造函数和自动注入）

    一.Setter注入 这里我是希望在Student.java中调用Course.java中的内容. public class Course { public String name = "数 ...

  3. iOS 碰撞检測以及事件响应

    */ //碰撞检測 //碰撞检測de过程 //碰撞检測 //碰撞检測 //碰撞检測 //UIApplication-> UIWindow-> UIController-> 视图控制器 ...

  4. Probability Concepts

    Probability Concepts Unconditional probability and Conditional Probability Unconditional Probability ...

  5. paip.分布式应用系统java c#.net php的建设方案

    paip.分布式应用系统java c#.net php的建设方案 1. 基础设施的建立 1 2. 本地的的调用API 1 3. 数据的传输 1 4. 代码的传输 1 5. 代码的自动热编译 2 6.  ...

  6. error: expected expression before 'struct'

    错误原因: 使用了offsetof函数,却没有包含头文件<stddef.h> 解决办法: 包含<stddef.h>

  7. JSTL、EL的一些实践记录

    JSTL.EL是页面渲染比较常用的基础的技术.然而,因完成的项目大多是通过JSON或XML返回页面,然后Javascript渲染. 所以,JSTL.EL的使用语法,到现在也很不熟练,不可信手拈来. 借 ...

  8. mysql 5.7以上版本安装配置方法图文教程（mysql 5.7.12\mysql 5.7.13\mysql 5.7.14）(转)

    http://www.jb51.net/article/90302.htm ******************************* 这篇文章主要为大家分享了MySQL 5.7以上缩版本安装配置 ...

  9. 【转】雅典娜与宙斯的对话.(kerberos原理)

    1 八月 2010 22:07:51关于Kerberos的对话(MIT)雅典娜与宙斯 雅典娜与宙斯关于地狱之门守护者的对话 Kerberos: Network Authentication Proto ...

  10. jquery input切换编辑和不可编辑模式,input自动获得焦点，遍历所有的子类标签

    input切换编辑和不可编辑模式 在项目中我们经常会用到这样的效果,点击一下不可编辑的input 标签,变成可编辑的input标签.用法如下 <input type="text&quo ...