高德地图根据经纬度转换成地址JS代码demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>逆地理编码</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d94035ac264f0cc5b293199360ca0e1e"></script>
<script language="javascript">
var mapObj;
function mapInit() {
mapObj = new AMap.Map("iCenter", {
view: new AMap.View2D({
center:new AMap.LngLat(121.428000,31.197600),//地图中心点
zoom:13 //地图显示的缩放级别
})
});
}
//已知点坐标
var lnglatXY = new AMap.LngLat(121.428000,31.197600);
function geocoder() {
var MGeocoder;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
});
//加点
var marker = new AMap.Marker({
map:mapObj,
icon: new AMap.Icon({
image: "http://api.amap.com/Public/images/js/mark.png",
size:new AMap.Size(58,30),
imageOffset: new AMap.Pixel(-32, -0)
}),
position: lnglatXY,
offset: new AMap.Pixel(-5,-30)
});
mapObj.setFitView();
}
//鼠标划过显示相应点
var marker;
function onMouseOver (e) {
var coor = e.split(','),
lnglat = new AMap.LngLat(coor[0], coor[1]);
if (!marker) {
marker = new AMap.Marker({
map:mapObj,
icon: "http://webapi.amap.com/images/0.png",
position: lnglat,
offset: new AMap.Pixel(-10, -34)
});
} else {
marker.setPosition(lnglat);
}
mapObj.setFitView();
}
//回调函数
function geocoder_CallBack(data) {
var resultStr = "";
var roadinfo ="";
var poiinfo="";
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
//返回周边道路信息
roadinfo +="<table style='width:600px'>";
for(var i=0;i<data.regeocode.roads.length;i++){
var color = (i % 2 === 0 ? '#fff' : '#eee');
roadinfo += "<tr style='background-color:" + color + "; margin:0; padding:0;'><td>道路:" + data.regeocode.roads[i].name + "</td><td>方向:" + data.regeocode.roads[i].direction + "</td><td>距离:" + data.regeocode.roads[i].distance + "米</td></tr>";
}
roadinfo +="</table>"
//返回周边兴趣点信息
poiinfo += "<table style='width:600px;cursor:pointer;'>";
for(var j=0;j<data.regeocode.pois.length;j++){
var color = j % 2 === 0 ? '#fff' : '#eee';
poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>兴趣点:" + data.regeocode.pois[j].name + "</td><td>类型:" + data.regeocode.pois[j].type + "</td><td>距离:" + data.regeocode.pois[j].distance + "米</td></tr>";
}
poiinfo += "</table>";
//返回结果拼接输出
resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">"+"<b>地址</b>:"+ address + "<hr/><b>周边道路信息</b>:<br/>" + roadinfo + "<hr/><b>周边兴趣点信息</b>:<br/>" + poiinfo +"</div>";
document.getElementById("result").innerHTML = resultStr;
}
</script>
</head>
<body onload="mapInit();">
<div id="iCenter" ></div>
<div class="demo_box">
<input type="button" value="逆地理编码" onclick="geocoder()"/>
<div id="r_title"><b>查询结果:</b></div>
<div id="result"> </div>
</div>
</body>
</html>
高德地图根据经纬度转换成地址JS代码demo的更多相关文章
- 在微信小程序里自动获得当前手机所在的经纬度并转换成地址
效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的 ...
- 根据Unicode编码用C#语言把它转换成汉字的代码
rt 根据所具有的Unicode编码用C#语言把它转换成汉字的代码 var s = System.Web.HttpUtility.HtmlDecode(Utf8Str); var o = Newton ...
- Java将ip字符串转换成整数的代码
下面代码是关于Java将ip字符串转换成整数的代码,希望对各位有较大用途. public class IpUtil { public static int Ip2Int(String strIp){ ...
- js不同地图坐标系经纬度转换(天地图,高德地图,百度地图,腾讯地图)
1.js转换代码 1 //转换常数 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3 var pi = 3.14159265358979324; ...
- js冒泡法和数组转换成字符串示例代码
将数组转换成字符串的方法有很多,讲解下js冒泡法的使用.js代码: //js冒泡法与数据转换为字符串的例子 //整理:www.jbxue.com window.onload = function(){ ...
- C# 13位时间戳转换成标准时间C#代码
原地址:https://www.cnblogs.com/yixuehan/p/5559244.html /// <summary> /// 时间戳转换成标准时间 /// </summ ...
- ASP.NET将word文档转换成pdf的代码
一.添加引用 using Microsoft.Office.Interop.Word; 二.转换方法 1.方法 C# 代码 /// <summary> /// 把Word文件转换成pdf文 ...
- 城市连动纯js代码DEMO
前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- 【高德地图API】从头德国高中生JS API(三)覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖
覆盖物,是一张地图的灵魂.有覆盖物的地图.才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具).最重要最必不可少的就是覆盖物了.覆盖物有多种.包含.标注.折线.多 ...
随机推荐
- Scrapy Learning笔记(四)- Scrapy双向爬取
摘要:介绍了使用Scrapy进行双向爬取(对付分类信息网站)的方法. 所谓的双向爬取是指以下这种情况,我要对某个生活分类信息的网站进行数据爬取,譬如要爬取租房信息栏目,我在该栏目的索引页看到如下页面, ...
- 第二章 管理程序流(In .net4.5) 之 管理多线程
1. 概述 本章包括同步资源以及取消长时间任务相关的内容. 2. 主要内容 2.1 同步资源 ① lock关键字实现.会阻塞程序,有可能会导致死锁. ② volatile关键字可以禁用编译优化,用于避 ...
- python 从private key pem文件中加载public key
import rsa import logging from Crypto.PublicKey import RSA class RsaUtil: def __init__(self, pem_fil ...
- ruby 笔记
symbol 不能有- 'data-turbolinks-track' => true stop rails –s kill -INT $(cat tmp/pids/server.pid) cl ...
- lib和dll的区别,生成(转)
首先介绍下静态库(静态链接库,.lib文件),动态库*(动态链接库,.dll文件)的概念,首先两者都是代码共享的方式. 静态库:在链接步骤中,连接器将从库文件取得所需的代码,复制到生成的可执行文件,这 ...
- CPU制造工艺 级选来决定cpu等级
CPU制造工艺 编辑 CPU制造工艺又叫做CPU制程,它的先进与否决定了CPU的性能优劣.CPU的制造是一项极为复杂的过程,当今世上只有少数几家厂商具备研发和生产CPU的能力.CPU的发展史也可以看作 ...
- linux打开端口
客户那边有台服务器同一个局域网中都无法访问,排除lamp环境问题,发现时服务器中的防火墙没有开启80端口.于是去网上搜索了一下,在脚本之家看到一种添加代码的方法 代码如下 复制代码 vi /etc/ ...
- mac下的ssh自动登陆
终端的ssh是标准的OpenSSH client 如果需要克隆会话功能,可以通过配置打开. $ cat .ssh/config Host * ControlMaster auto ControlPat ...
- PB打开ole控件IE浏览器版本问题_指定Webbrowser控件所用IE内核版本(转)
如果电脑上安装了IE8或者之后版本的IE浏览器,Webbrowser控件会使用IE7兼容模式来显示网页内容.解决方法是在注册表中为你的进程指定引用IE的版本号. 比如我的程序叫做a.exe 对于32位 ...
- 64位Windows2003下如何正确发布VesnData.Net(VDN)
64位windows2003下发布VDN,按照正常的步骤会出现:试图加载格式不正确的程序. (异常来自 HRESULT:0x8007000B)的错误. 按照下面的步骤进行处理: 1.如果安装了64位F ...