码迷,mamicode.com
首页 > 其他好文 > 详细

高德地图获取地图坐标

时间:2015-11-26 15:02:12      阅读:2150      评论:0      收藏:0      [点我收藏+]

标签:

<!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">&nbsp;</span></p>
        <p><label>地址:</label><span id="iAddress">&nbsp;</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>

 

高德地图获取地图坐标

标签:

原文地址:http://www.cnblogs.com/gaohj/p/4997568.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!