高德座標拾取器

時間 2019-11-06

標籤座標拾取简体版

原文原文鏈接

頁面效果javascript

應用場景：你須要在一個彈窗中拾取一個高德的地址座標。html

  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>一、鼠標滾輪能夠縮放地圖，拖動地圖。</p>
 33         <p>二、點擊地圖，便可得到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>

供參考，謝謝java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。