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="width:30%">
<br>
point:<input type="text" name="point" id="point" style="width: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.效果展示:
当没有输入地址,提示:
jQuery通过地址获取经纬度demo的更多相关文章
- jQuery根据地址获取经纬度
一.HTML部分 1 @*景区位置*@ 2 <tr> 3 <th>景区名称:</th> 4 <td><input class="txt ...
- 百度地图api根据地址获取经纬度
package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...
- 利用百度API(js),怎样通过地址获取经纬度
根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...
- JS 通过选择百度地图地址获取经纬度自动填充到文本框中的方法
首先要注册百度地图API. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用. 应用类型选择:“浏览器端”, ...
- 利用百度API(js),通过地址获取经纬度的注意事项
网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...
- Java 通过地址获取经纬度 - 高德地图
一.添加依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-v ...
- Python 根据地址获取经纬度
方法一: 使用Geopy包 : https://github.com/geopy/geopy (仅能精确到城镇,具体街道无结果返回) from geopy.geocoders import Nom ...
- Python 根据地址获取经纬度及求距离
方法一: 使用Geopy包 : https://github.com/geopy/geopy (仅能精确到城镇,具体街道无结果返回) from geopy.geocoders import Nom ...
- Android Google Maps API 网络服务用于网络定位、计算路线、获取经纬度、获取详细地址等
extends:http://blog.csdn.net/h7870181/article/details/12505883 Google Maps API 网络服务 官网地址 : https://d ...
随机推荐
- Linux C动态链接库实现一个插件例子
实现一个简单的计算动态链接库:升级动态链接库后,在不重新编译主程序的情况下,直接生效. lib库: #cat math.c #include <stdio.h> int add(int x ...
- OBJECTPROPERTY用法整理
OBJECTPROPERTY用法整理 分类: 系统表与表结构 数据库管理维护2010-06-03 16:37 2783人阅读 评论(1) 收藏 举报 数据库sql serverinsertobject ...
- linux下查找字符串的命令
1. set命令可以显示出当前shell下所有全局参量定义及其值; 2. 查找并删除当前目录下小文件: find . -type f -size -10k -exec rm {} \; 说明: w ...
- 18mybatis
18mybatis-2018/08/02 1.mybatis标签 定义SQL语句 id :唯一的标识符 parameterType:传给此语句的参数的全路径名或别名例:com.test.poso.Us ...
- ProtoBuf - Arena
1.概述 最近看 Protocal Buffer 的源码,初次见到这个库源自陈硕的 muduo ,便打算看一看,在此做一下记录.官网文档不能访问,只能凭借代码的自己理解,查看的源码版本为 3.6.0. ...
- HDU—4463 Outlets 最小生成树
In China, foreign brand commodities are often much more expensive than abroad. The main reason is th ...
- CSU1011: Counting Pixels
Description Did you know that if you draw a circle that fills the screen on your 1080p high definiti ...
- 查看用户的信息文件-passwd
passwd 文件 位置:/etc/passwd 作用:用于保存用户的账户信息 注意点:由于passwd也可以作为一个命令直接使用,也可以作为配置文件,所以如果使用man命令进行查看帮助信息时,应该有 ...
- [Python3网络爬虫开发实战] 3.1.1-发送请求
使用urllib的request模块,我们可以方便地实现请求的发送并得到响应,本节就来看下它的具体用法. 1. urlopen() urllib.request模块提供了最基本的构造HTTP请求的方法 ...
- [Python3网络爬虫开发实战] 3.1.2-处理异常
前一节我们了解了请求的发送过程,但是在网络不好的情况下,如果出现了异常,该怎么办呢?这时如果不处理这些异常,程序很可能因报错而终止运行,所以异常处理还是十分有必要的. urllib的error模块定义 ...