高德坐标拾取器

最新推荐文章于 2024-03-13 11:03:58 发布

weixin_34336526

最新推荐文章于 2024-03-13 11:03:58 发布

阅读量2.4k

点赞数

文章标签： javascript 前端 ViewUI

页面效果

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

  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>

供参考，谢谢

weixin_34336526

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
高德坐标拾取器

页面效果应用场景：你需要在一个弹窗中拾取一个高德的地址坐标。 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 5 &lt;titl
复制链接

扫一扫