<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地图初始加载定位到当前城市</title>
<style type="text/css">
body{
margin:0;
height:100%;
width:100%;
position:absolute;
}
#mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
#tip{
height:45px;
background-color:#fff;
padding-left:10px;
padding-right:10px;
border:1px solid #969696;
position:absolute;
font-size:12px;
right:10px;
bottom:20px;
border-radius:3px;
line-height:45px;
}
</style>
</head>
<body>
<input type="hidden" id="lngX" name="lngX" value=""/>
<input type="hidden" id="latY" name="latY" value=""/>
<div id="mapContainer"></div>
<div id="tip">
<div id="info"></div>
</div>
<script type="text/javascript" src="
http://webapi.amap.com/maps?v=1.3&key=94130b7d9999d8e1e1146a711955f2b3"></script>
<script type="text/javascript">
//初始化地图对象，加载地图
////初始化加载地图时，若center及level属性缺省，地图默认显示用户当前城市范围
var map = new AMap.Map('mapContainer', {
resizeEnable: true,
view: new AMap.View2D({
//center: new AMap.LngLat(116.397428, 39.90923),
zoom: 13
})
});
//地图中添加地图操作ToolBar插件
map.plugin(['AMap.ToolBar'],function(){
//设置地位标记为自定义标记
var toolBar = new AMap.ToolBar();
map.addControl(toolBar);
});
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener=AMap.event.addListener(map,'click',function(e){
document.getElementById("lngX").value=e.lnglat.getLng();
document.getElementById("latY").value=e.lnglat.getLat();
geocoder();
});
//已知点坐标
function geocoder() {
//var lnglatXY = new AMap.LngLat(116.396574,39.992706);
//alert(document.getElementById("lngX").value);
//alert(document.getElementById("latY").value);
lngX = document.getElementById("lngX").value;
latY = document.getElementById("latY").value;
//alert(lngX);
//alert(latY);
var lnglatXY = new AMap.LngLat(lngX,latY);
var MGeocoder;
//加载地理编码插件
AMap.service(["AMap.Geocoder"], function() {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//逆地理编码
MGeocoder.getAddress(lnglatXY, function(status, result){
if(status === 'complete' &&
result.info === 'OK'){
geocoder_CallBack(result);
}
});
});
//加点
map.clearMap();
var marker = new AMap.Marker({
map:map,
icon: new AMap.Icon({
image: "
http://cache.amap.com/lbs/static/jsdemo001.png",
size:new AMap.Size(58,30),
imageOffset: new AMap.Pixel(-32, -0)
}),
position: lnglatXY,
offset: new AMap.Pixel(-5,-30)
});
map.setFitView();
}
//鼠标划过显示相应点
var marker;
function onMouseOver (e) {
var coor = e.split(','),
lnglat = new AMap.LngLat(coor[0], coor[1]);
if (!marker) {
marker = new AMap.Marker({
map:map,
icon: "
http://webapi.amap.com/images/0.png",
position: lnglat,
offset: new AMap.Pixel(-10, -34)
});
} else {
marker.setPosition(lnglat);
}
map.setFitView();
}
//回调函数
function geocoder_CallBack(data) {
var resultStr = "";
var poiinfo="";
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
//返回周边兴趣点信息
//for(var j=0;j<data.regeocode.pois.length;j++){
for(var j=0;j<1;j++){
var color = j % 2 === 0 ? '#fff' : '#eee';
//poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>" + data.regeocode.pois[j].name + "</td><td>距离：" + data.regeocode.pois[j].distance + "米</td></tr>";
poiinfo += " " + data.regeocode.pois[j].name + " 距离：" + data.regeocode.pois[j].distance + "米";
}
//返回结果拼接输出
resultStr = "地址："+ address + " " + poiinfo +" ";
document.getElementById("info").innerHTML = resultStr;
}
</script>
</body>
</html>
Select Language