高德地图坐标查询工具——JavaScript

最新推荐文章于 2024-03-05 09:31:27 发布

心砚thu

最新推荐文章于 2024-03-05 09:31:27 发布

阅读量5.7k

点赞数 1

分类专栏： html5开发文章标签：高德地图 javascript 坐标查询 html

本文链接：https://blog.csdn.net/zhaoxy_thu/article/details/17020233

版权

html5开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近需要查询高德地图上某个地点的坐标，但是苦于高德地图没有提供这样的功能。幸运的是，高德地图提供了javascript的api，于是打算自己写一个查询坐标的工具，在这里分享给大家。

代码如下：

<!DOCTYPE html>

<html>
<head>
    <title>高德地图</title>
    <meta charset = "UTF-8" />
    <script src="http://webapi.amap.com/maps?v=1.2&key=662b7a5d373bccb29453167d08245aef" type="text/javascript"></script>
    <script>
        var mapObj;
        function getCoordinate(location){
            var geocoderOption = {
                range:300,//范围
                crossnum:2,//道路交叉口数
                roadnum:3,//路线记录数
                poinum:2//POI点数
            };
            var geocoder = new AMap.Geocoder(geocoderOption);
            geocoder.geocode(location, function(data){
                var x = (data.list)[0].x;
                var y = (data.list)[0].y;
                document.getElementById("result").innerHTML = x + "," + y;

                var position=new AMap.LngLat(x,y);//创建中心点坐标
                if (!mapObj) {
                    mapObj=new AMap.Map("container",{center:position, level:18});//创建地图实例
                }else {
                    mapObj.setZoomAndCenter(18,position);
                }
            });
        }
    </script>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
</head>
<body>
    <div>
        <input type="text" id="input1">
        <button type="button" οnclick="getCoordinate(document.getElementById('input1').value)">查询坐标</button>
    </div>
    <div id="result"></div>
    <div id="container"></div>
</body>
</html>

使用时直接将以上代码拷贝到一个文本文件中，保存为html格式，用浏览器打开，就可以直接使用了。

界面如下：