<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>火星坐标拾取</title>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=您的key"></script>
<style>
#iMap{height:500px;width:600px;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>
时间： 2024-08-28 16:43:28