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>
    
  • 相关阅读:
    hive:Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient
    spark报错:Class org.apache.mapreduce.io.compress.GzipCodec not found
    flink操作mysql
    kettle解除同步条数限制
    hdfs上传文件报错,org.apache.hadoop.fs.ChecksumException:
    spark程序运行报错:java.lang.NoSuchMethodError:
    git merge的三种操作merge, squash merge, 和rebase merge
    高人制作的CocosCreator分包插件
    Android Studio 编译构建报错总结
    Mac OSX下修改 ulimit 参数
  • 原文地址:https://www.cnblogs.com/simpledev/p/3843324.html
Copyright © 2011-2022 走看看