欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-10 20:29:41
最近需要查询高德地图上某个地点的坐标,但是苦于高德地图没有提供这样的功能。幸运的是,高德地图提供了javascript的api,于是打算自己写一个查询坐标的工具,在这里分享给大家。   代...
最近需要查询高德地图上某个地点的坐标,但是苦于高德地图没有提供这样的功能。幸运的是,高德地图提供了javascript的api,于是打算自己写一个查询坐标的工具,在这里分享给大家。

 

代码如下:

 

 

<!doctype html>  
  
<html>  
<head>  
    <title>高德地图</title>  
    <meta charset = "utf-8" />  
    <script src="https://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>  
    <p>  
        <input type="text" id="input1">  
        <button type="button" onclick="getcoordinate(document.getelementbyid('input1').value)">查询坐标</button>  
    </p>  
    <p id="result"></p>  
    <p id="container"></p>  
</body>  
</html>  

 

 

 

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

界面如下:

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