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

最新推荐文章于 2024-08-05 20:04:15 发布

小邪de烦恼

最新推荐文章于 2024-08-05 20:04:15 发布

阅读量1.3w

点赞数 1

分类专栏：高德地图文章标签： JavaScript API

本文链接：https://blog.csdn.net/baidu_38384745/article/details/73346357

版权

高德地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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 οnlοad="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>