您的位置：首页 > Web前端 > JavaScript

高德地图坐标的获取（ JavaScript API ）

2017-06-16 17:44 429 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>坐标拾取</title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=452ee5c52fe0869fc3a9a06420d0016b"></script>
<style>
#iMap {
height: 1200px;
width: 1000px;
float: left;
}
.info {
float: left;
margin: 0 0 0 10px;
}
label {
width: 80px;
float: left;
}
.detail {
padding: 10px;
border: 1px solid #aaccaa;
}
</style>
</head>
<body onload="mapInit()">
<div id="iMap"></div>
<div class="info">
<h1>高德地图坐标拾取工具（GCJ-02坐标）</h1>
<p>说明：</p>
<p>1、鼠标滚轮可以缩放地图，拖动地图。</p>
<p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>
</br>
<div class="detail">
<p>
<span id="lnglat"> </span>
</p>
<p>
<span id="iAddress"> </span>
</p>
</div>
</div>
</body>
<script language="javascript">
var mapObj;
var lnglatXY;
//初始化地图

function mapInit() {
var opt = {
level: 10, //设置地图缩放级别
center: new AMap.LngLat(114.064675,22.548782) //设置地图中心点
}
mapObj = new AMap.Map("iMap", opt);
AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
}

function geocoder() {
var MGeocoder;
//加载地理编码插件
mapObj.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],
function(){
mapObj.addControl(new AMap.ToolBar());

mapObj.addControl(new AMap.Scale());

mapObj.addControl(new AMap.OverView({isOpen:true}));
mapObj.addControl(new AMap.MapType());
mapObj.addControl(new AMap.Geolocation());
});
mapObj.plugin(["AMap.Geocoder"], function () {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
});
//加点
var marker = new AMap.Marker({
map: mapObj,

icon: new AMap.Icon({
image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" ,
size: new AMap.Size(58, 30),
imageOffset: new AMap.Pixel(-0, -0)
}),
position: lnglatXY,
offset: new AMap.Pixel(-5, -30)
});
// mapObj.setFitView();
}

//回调函数

function geocoder_CallBack(data) {
console.log("ddd");
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
console.log(address);
//返回结果拼接输出
document.getElementById("iAddress").innerHTML = address;
}
//鼠标点击，获取经纬度坐标
function getLnglat(e) {
mapObj.clearMap();
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglat").innerHTML = x + "," + y;
lnglatXY = new AMap.LngLat(x, y);
geocoder();

}

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript API

相关文章推荐

新的分享

章节导航