高德坐标拾取器_坐标拾取器百度地图

全栈程序员站长

发布于 2022-09-16 11:33:36

1.7K0

发布于 2022-09-16 11:33:36

文章被收录于专栏：全栈程序员必看

页面效果

应用场景：你需要在一个弹窗中拾取一个高德的地址坐标。

 1 <!DOCTYPE html>  2 <html>  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  5 <title>酸奶小妹的火星坐标</title>  6 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOUKEY"></script>  7 <style>  8  #iMap {  9  height: 500px;  10  width: 600px;  11  float: left;  12 }  13  .info {  14  float: left;  15  margin: 0 0 0 10px;  16 }  17  label {  18  width: 80px;  19  float: left;  20 }  21  .detail {  22  padding: 10px;  23  border: 1px solid #aaccaa;  24 }  25 </style>  26 </head>  27 <body onload="mapInit()">  28 <div id="iMap"></div>  29 <div class="info">  30 <h1>坐标拾取工具（GCJ-02坐标）</h1>  31 <p>说明：</p>  32 <p>1、鼠标滚轮可以缩放地图，拖动地图。</p>  33 <p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>  34 </br>  35 <div class="detail">  36 <p>  37 <span id="lnglat">&nbsp;</span>  38 </p>  39 <p>  40 <span id="iAddress">&nbsp;</span>  41 </p>  42 </div>  43 </div>  44 </body>  45 <script language="javascript">  46 var mapObj;  47 var lnglatXY;  48 //初始化地图  49 function mapInit() {  50 var opt = {  51  level: 10, //设置地图缩放级别  52  center: new AMap.LngLat(116.397428, 39.90923) //设置地图中心点  53  }  54  mapObj = new AMap.Map("iMap", opt);  55  AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件  56  }  57 function geocoder() {  58 var MGeocoder;  59 //加载地理编码插件  60  mapObj.plugin(["AMap.Geocoder"], function () {  61  MGeocoder = new AMap.Geocoder({  62  radius: 1000,  63  extensions: "all"  64  });  65 //返回地理编码结果  66  AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);  67 //逆地理编码  68  MGeocoder.getAddress(lnglatXY);  69  });  70 //加点  71 var marker = new AMap.Marker({  72  map: mapObj,  73  icon: new AMap.Icon({  74  image: " http://api.amap.com/Public/images/js/mark.png" ,  75  size: new AMap.Size(58, 30),  76  imageOffset: new AMap.Pixel(-32, -0)  77  }),  78  position: lnglatXY,  79  offset: new AMap.Pixel(-5, -30)  80  });  81 // mapObj.setFitView();  82  }  83 //回调函数  84 function geocoder_CallBack(data) {  85  console.log("ddd");  86 var address;  87 //返回地址描述  88  address = data.regeocode.formattedAddress;  89  console.log(address);  90 //返回结果拼接输出  91  document.getElementById("iAddress").innerHTML = address;  92  }  93 //鼠标点击，获取经纬度坐标  94 function getLnglat(e) {  95  mapObj.clearMap();  96 var x = e.lnglat.getLng();  97 var y = e.lnglat.getLat();  98  document.getElementById("lnglat").innerHTML = x + "," + y;  99  lnglatXY = new AMap.LngLat(x, y); 100  geocoder(); 101  } 102 </script> 103 </html>

供参考，谢谢

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166835.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java