<!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. 在微信小程序里自动获得当前手机所在的经纬度并转换成地址

    效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的 ...

  2. 根据Unicode编码用C#语言把它转换成汉字的代码

    rt 根据所具有的Unicode编码用C#语言把它转换成汉字的代码 var s = System.Web.HttpUtility.HtmlDecode(Utf8Str); var o = Newton ...

  3. Java将ip字符串转换成整数的代码

    下面代码是关于Java将ip字符串转换成整数的代码,希望对各位有较大用途. public class IpUtil { public static int Ip2Int(String strIp){ ...

  4. js不同地图坐标系经纬度转换（天地图，高德地图，百度地图，腾讯地图）

    1.js转换代码 1 //转换常数 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3 var pi = 3.14159265358979324; ...

  5. js冒泡法和数组转换成字符串示例代码

    将数组转换成字符串的方法有很多,讲解下js冒泡法的使用.js代码: //js冒泡法与数据转换为字符串的例子 //整理:www.jbxue.com window.onload = function(){ ...

  6. C# 13位时间戳转换成标准时间C#代码

    原地址:https://www.cnblogs.com/yixuehan/p/5559244.html /// <summary> /// 时间戳转换成标准时间 /// </summ ...

  7. ASP.NET将word文档转换成pdf的代码

    一.添加引用 using Microsoft.Office.Interop.Word; 二.转换方法 1.方法 C# 代码 /// <summary> /// 把Word文件转换成pdf文 ...

  8. 城市连动纯js代码DEMO

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  9. 【高德地图API】从头德国高中生JS API（三）覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖

    覆盖物,是一张地图的灵魂.有覆盖物的地图.才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具).最重要最必不可少的就是覆盖物了.覆盖物有多种.包含.标注.折线.多 ...

随机推荐

  1. 《Prism 5.0源码走读》Service Locator Pattern

    在Prism Bootstrapper里面取实例的时候使用 ServiceLocator模式,使用的是CommonServiceLocator库 (http://commonservicelocato ...

  2. arcgis中求多点到一条曲线的最短欧几里得距离

    1.使用的工具:Arctoolbox----Analysis Tools----Proximity----Near工具. 2.注意:在求距离之前一定要先设置好坐标系统.

  3. o2o的一些看法

    最近一段时间o2o(online to offline)真是越来越来热了,尤其是微信支持支付功能之后.现在随便哪个地方都可以看到二维码,然后手机一扫就可以看到跑到线上看到卖家一些产品信息了.看到这里面 ...

  4. JavaScript高级程序设计之window对象

    在浏览器中window对象实现了JavaScript中的Global对象: window对象是最顶层的对象: 所有其他全局的东西都可以通过它的属性检索到. ; window.aa = ; // 所有全 ...

  5. 企业该如何进行高效IT运维管理

    企业该如何进行高效IT运维管理 在企业内部也是一样,当大量的生产和经营数据集中在数据中心,一旦人们与数据中心因为IT故障而失去联系,停滞的也许不是个人应用受阻这样简单的后果.我们谁也不想看到自己企业的 ...

  6. AngularJS与RequireJS集成方案

    关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianContr ...

  7. .net中运用solr提升搜索效率(入门)

    概述: 在开发网站的时候经常有要对某些内容查询的需求.此时如果基于数据库查询来做搜索功能,由于要对多个字段做模糊匹配,效率往往非常糟糕.这种情况就可以用Solr来提升搜索的效率.Solr是一个独立的企 ...

  8. OpenGL学习笔记之了解OpenGL

    OpenGL(全写Open GraphicsLibrary)是个定义了一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. 说 ...

  9. Linux常用命令查看日志

    cattail -f日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关的日 ...

  10. MySQL 主从数据库设置

    1.复制的介绍 MySQL 支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护文件的一个索引 以跟踪日志循环.这些日志可 ...