JS实现根据详细地址获取经纬度功能示例
本文实例讲述了JS实现根据详细地址获取经纬度功能。分享给大家供大家参考，具体如下：
这个功能还是比较实用的，记录分享一下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>根据地址查询经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body style="background:#CBE1FF">
<div style="width:730px;margin:auto;">
要查询的地址：<input id="text_" type="text" value="郑州大学" style="margin-right:100px;" /> 查询结果(经纬度)：
<input id="result_" type="text" />
<input type="button" value="查询" onclick="searchByStationName();" />
<div id="container" style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50;
border: 1px solid gray;
overflow:hidden;">
</div>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom("郑州", 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({
isOpen: true,
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
})); //右下角，打开
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
function searchByStationName() {
map.clearOverlays(); //清空原来的标注
var keyword = document.getElementById("text_").value;
localSearch.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
map.centerAndZoom(poi.point, 13);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
});
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
});
localSearch.search(keyword);
}
</script>
</html>
这里使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行效果：
更多关于JavaScript相关内容还可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
Android编程实现根据经纬度查询地址并对获取的json数据进行解析的方法
本文实例讲述了Android编程实现根据经纬度查询地址并对获取的json数据进行解析的方法.分享给大家供大家参考,具体如下: 第一步:根据指定的URL从google 服务器上获得包含地址的json格式的数据(其还提供xml格式的,但json解析效率比xml高) private static StringBuffer getJSONData(String urlPath){ try { URL url = new URL(urlPath); HttpURLConnection httpURLCon
-
详解js根据百度地图提供经纬度计算两点距离
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,point2); //point1.point2 是Point对象 如果在不使用百度地图,但是已知百度地图的经纬度情况下也是可以计算出与上面相同的值的 三方库 此库提供计算两点距离的方法 引用此库使用 返回(米) BMapLib.GeoUtils.getDistance(point1 ,point2)
-
JS使用百度地图API自动获取地址和经纬度操作示例
本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作.分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求. 故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度: 1.HTML代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
-
用NodeJS实现批量查询地理位置的经纬度接口
实现步骤 1. 查询接口 网站上这种类型的接口还不少,笔者直接找了百度地图的接口做,接口文档,调用的API是Geocoding API中的地理编码服务 请求示例:对北京市百度大厦进行地理编码查询 http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderOption&output=json&address=百度大厦&city=北京市 这里面需要一个ak参数
-
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配. 主要问题和解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Goog
-
js 获取经纬度的实现方法
js 获取经纬度的实现方法 <!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo
-
JavaScript实现经纬度转换成地址功能
在webAPP开发过程中,需要将返回的经纬度转换成中文地址,一番折腾后得以实现,总结如下 原理分析: 百度地图API提供了一个JS库,我们只需要用这个接口就可以实现转换功能,这里我写一个简单的demo,与君共勉 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewpor
-
根据经纬度计算地球上两点之间的距离js实现代码
利用JS实现的根据经纬度计算地球上两点之间的距离 最近用到了根据经纬度计算地球表面两点间距离的公式,然后就用JS实现了一下. 计算地球表面两点间的距离大概有两种办法. 第一种是默认地球是一个光滑的球面,然后计算任意两点间的距离,这个距离叫做大圆距离(The Great Circle Distance). 公式如下: 使用JS来实现为: 复制代码 代码如下: var EARTH_RADIUS = 6378137.0; //单位M var PI = Math.PI; function getRad(
-
JS实现根据详细地址获取经纬度功能示例
本文实例讲述了JS实现根据详细地址获取经纬度功能.分享给大家供大家参考,具体如下: 这个功能还是比较实用的,记录分享一下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根据地址查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
-
如何用php根据地址获取经纬度
这里用的是百度地图的接口,你需要先申请百度的服务秘钥(ak). 百度地图有这样一个接口:地理编码 1.php代码: /** * 根据地址获取经纬度 -- 百度地图 */ public function queryAddress(){ $ak = '你的ak'; //填写你的ak $address = '北京市海淀区上地七街'; //要获取的位置 $url = 'http://api.map.baidu.com/geocoding/v3/?output=json&address='.$addres
-
vuejs2.0运用原生js实现简单的拖拽元素功能示例
整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta
-
JS实现的验证身份证及获取地区功能示例
本文实例讲述了JS实现的验证身份证及获取地区功能.分享给大家供大家参考,具体如下: 这里的代码可以用来验证身份证号,并且根据身份证号来判断是哪个省份及性别 代码示例: <head > <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> </head> <body
-
js canvas实现验证码并获取验证码功能
本文实例为大家分享了js canvas制作验证码并获取验证码的具体代码,供大家参考,具体内容如下 最近没事写了一些小插件,今天要说的是包装一个验证码的js代码,如下: /**包装**/ var xh_digital_code = function(option) { this.el = option.el; var self = this; var click_code = ''; var canvas_id = "xh_canvas_" + xh_randomWord(false,
-
微信小程序使用map组件实现解析经纬度功能示例
本文实例讲述了微信小程序使用map组件实现解析经纬度功能.分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 1. map组件实现定位标记或者指定定位标记,并保存location. 2. 采用高德地图微信小程序开发API(
-
JS实现的四级密码强度检测功能示例
本文实例讲述了JS实现的四级密码强度检测功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 密码强度检测 </title> <meta http-equiv=&quo
-
纯js实现的积木(div层)拖动功能示例
本文实例讲述了纯js实现的积木(div层)拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖动</title> <style type="text/css"> </style> </head> <bo
-
微信小程序简单实现form表单获取输入数据功能示例
本文实例讲述了微信小程序简单实现form表单获取输入数据功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input name="u