zoukankan      html  css  js  c++  java
  • 高德地图根据经纬度转换成地址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='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='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>
    
  • 相关阅读:
    通讯录封装实现
    简单通讯录的实现 main..h .m文件全部
    iOS 开发 OC编程 字典和集合 排序方法
    iOS 开发 OC编程 数组冒泡排序.图书管理
    iOS 开发 OC编程 属性和字符串练习
    iOS 开发 OC编程 属性和字符串
    iOS 开发 OC编程 便利构造器以及初始化方法
    iOS 开发 OC编程 方法的书写
    IOS 开发 OC编程 类和对象
    iOS 开发 c语言阶段考试题
  • 原文地址:https://www.cnblogs.com/simpledev/p/3843324.html
Copyright © 2011-2022 走看看