【案例】通过高德地图接口实现正向编码地址转坐标

最新推荐文章于 2023-05-08 19:45:12 发布

weixin_30823833

最新推荐文章于 2023-05-08 19:45:12 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/supreme-H/p/7411354.html

本文通过一个具体的示例介绍了如何使用高德地图API进行地理编码操作，包括获取经纬度信息及根据经纬度反查地址等。该示例展示了如何在网页中嵌入地图并实现地理编码功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=4cb2435c46a93df6cca74737a1d5d269&plugin=AMap.Geocoder"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        .clearbox:after{
            content: '';
            clear: both;
            display: block;
        }
        .subjectbody{
            height: 600px;
            width: 1000px;
        }
        .bodyfoot{
            width: 200px;
            height: 600px;
            background: #ccc;
            float: left;
        }
        #container{
            float: left;
        }
    </style>
</head>
<body>

<div class="subjectbody clearbox">
    <div class="bodyfoot">
        <span>经纬度位置</span>
        <ul class="grid">
            <li></li>
            <li></li>
        </ul>
        <span>具体位置</span>
        <ul class="address">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="container" style="width: 800px; height:600px"></div>
    <div id="tip">
        <span id="result"></span>
</div>
<script>
    window.onload= function () {
        var longitude=document.querySelector('.grid').querySelector('li');
        var laitude=document.querySelector('.grid').querySelectorAll('li')[1];
        var addressArr=document.querySelector('.address').querySelectorAll('li');
        var map = new AMap.Map('container',{
            zoom: 10
        });
        function geocoder() {
            var geocoder = new AMap.Geocoder({
                city: "0512", //城市，默认：“全国”
                radius: 1000 //范围，默认：500
            });
            //地理编码,返回地理编码结果
            geocoder.getLocation("高新区", function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    geocoder_CallBack(result);
                }
            });
        }
        geocoder();
        function addMarker(i, d) {
            var marker = new AMap.Marker({
                map: map,
                position: [ d.location.getLng(),  d.location.getLat()]
            });
            var infoWindow = new AMap.InfoWindow({
                content: d.formattedAddress,
                offset: {x: 0, y: -30}
            });
            marker.on("mouseover", function(e) {
                infoWindow.open(map, marker.getPosition());
            });
        }
        //地理编码返回结果展示
        function geocoder_CallBack(data) {
            var resultStr = "";
            //地理编码结果数组
            var geocode = data.geocodes;
            for (var i = 0; i < geocode.length; i++) {
                //拼接输出html
                resultStr += "<span style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + geocode[i].formattedAddress + "" + "&nbsp;&nbsp;<b>的地理编码结果是:</b><b>&nbsp;&nbsp;&nbsp;&nbsp;坐标</b>：" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b>&nbsp;&nbsp;&nbsp;&nbsp;匹配级别</b>：" + geocode[i].level + "</span>";
                addMarker(i, geocode[i]);
            }
            map.setFitView();
            document.getElementById("result").innerHTML = resultStr;
        }
    }



</script>
</body>
</html>