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

来源：互联网发布：淘宝有哪些好吃的零食编辑：程序博客网时间：2024/05/22 12:25

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

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

界面如下：

如果大家觉得对自己有帮助的话，还希望能帮顶一下，谢谢：）

个人博客：http://blog.csdn.net/zhaoxy2850

本文地址：http://blog.csdn.net/zhaoxy_thu/article/details/17020233

转载请注明出处，谢谢！