高德地图根据经纬度转换成地址JS代码demo

最新推荐文章于 2023-12-06 18:07:17 发布

dfsafsd32323

最新推荐文章于 2023-12-06 18:07:17 发布

阅读量359

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/simpledev/p/3843324.html

版权

<!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 οnmοuseοver='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 οnlοad="mapInit();">
    <div id="iCenter" ></div>
    <div class="demo_box">
            <input type="button" value="逆地理编码" οnclick="geocoder()"/>
        <div id="r_title"><b>查询结果:</b></div>
        <div id="result"> </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/simpledev/p/3843324.html

dfsafsd32323

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
高德地图根据经纬度转换成地址JS代码demo

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>逆地理编码</title><link rel="stylesheet" type="t...
复制链接

扫一扫