首页 > 程序开发 > web前端 > HTML 5 >

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

2013-11-30

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

最近需要查询高德地图上某个地点的坐标,但是苦于高德地图没有提供这样的功能。幸运的是,高德地图提供了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" onclick="getCoordinate(document.getElementById(&#39;input1&#39;).value)">查询坐标</button>  
    </div>  
    <div id="result"></div>  
    <div id="container"></div>  
</body>  
</html>  

使用时直接将以上代码拷贝到一个文本文件中,保存为html格式,用浏览器打开,就可以直接使用了。
界面如下:
相关文章
最新文章
热点推荐