高德地图：点击获取火星坐标(经纬度)
本文根据酸奶小妹博文中代码进行修改：http://www.cnblogs.com/milkmap/p/3627940.html
由于高德api升级，原文代码貌似已经不能用，略作修改后可用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>基本地图展示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
#iMap{height:800px;width:900px;float:left;}
.info{float:left;margin:0 0 0 10px;}
label{width:80px;float:left;}
</style>
</head>
<body onLoad="mapInit()">
<div id="iMap"></div>
<div class="info">
<p><label>火星坐标：</label><span id="lnglat"> </span></p>
<p><label>地址：</label><span id="iAddress"> </span></p>
</br>
<p>说明：</p>
<p>1、鼠标滚轮可以缩放地图，拖动地图。</p>
<p>2、点击地图，即可获得GCJ-02的经纬度坐标，地址。</p>
</div>
</body>
<script language="javascript">
var mapObj;
var lnglatXY;
//初始化地图
function mapInit(){
var opt = {
level: 13, //设置地图缩放级别
center: new AMap.LngLat(116.397428, 39.90923) //设置地图中心点
}
mapObj = new AMap.Map("iMap", opt);
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
}
function geocoder() {
var MGeocoder;
//加载地理编码插件
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: "http://api.amap.com/Public/images/js/mark.png",
size:new AMap.Size(58,30),
imageOffset: new AMap.Pixel(-32, -0)
}),
position: lnglatXY,
offset: new AMap.Pixel(-5,-30)
});
mapObj.setFitView();
}
//回调函数
function geocoder_CallBack(data) {
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
//返回结果拼接输出
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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章