语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>常用API接入 >>地图接口调用 >>HDHCMS收集高德地图坐标拾取

HDHCMS收集高德地图坐标拾取

2018/10/24 11:12:35 0人评论 1017次 作者:admin

HDHCMS收集高德地图坐标拾取,高德地图坐标拾取工具(GCJ-02坐标)鼠标滚轮可以缩放地图,拖动地图。点击地图,即可获得GCJ-02的经纬度坐标,即火星坐标。…

<!DOCTYPE html>

<html>

 <head> 

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

  <title>HDHCMS收集高德地图坐标拾取</title> 

  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&amp;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 onload="mapInit()"> 

  <div id="iMap"></div> 

  <div class="info"> 

   <h1>高德地图坐标拾取工具(GCJ-02坐标)</h1> 

   <p>说明:</p> 

   <p>1、鼠标滚轮可以缩放地图,拖动地图。</p> 

   <p>2、点击地图,即可获得GCJ-02的经纬度坐标,即火星坐标。</p> 

   <h1>HDHCMS收集高德地图坐标拾取</h1>

   <br /> 

   <div class="detail"> 

    <p> <span id="lnglat"> </span> </p> 

    <p> <span id="iAddress"> </span> </p> 

   </div> 

  </div>  

  <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>  

 </body>

</html>


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮