高德地图坐标查询工具——JavaScript
程序员文章站
2022-05-03 20:33:02
最近需要查询高德地图上某个地点的坐标，但是苦于高德地图没有提供这样的功能。幸运的是，高德地图提供了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格式，用打开，就可以直接使用了。
界面如下：