高德地图坐标查询工具——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格式,用打开,就可以直接使用了。
界面如下:
上一篇: Oracle和DB2数据库中的Translate使用讲解
下一篇: 自动获得远程图片 #Writ