高德地圖JSApi

時間 2019-11-14

原文原文鏈接

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>火星座標獲取demo</title>

<script src="http://webapi.amap.com/js/marker.js"></script>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=本身應用的key'></script>

<style>
#iMap{height:500px;width:600px;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>一、鼠標滾輪能夠縮放地圖，拖動地圖。</p>
        <p>二、點擊地圖，便可得到GCJ-02的經緯度座標，即火星座標。</p>
        </br>
        <div class="detail">
            <p><span id="lnglat">&nbsp;</span></p>
            <p><span id="iAddress">&nbsp;</span></p>
        </div>        
    </div>
</body>
<script language="javascript">
var mapObj;
var lnglatXY;


//初始化地圖
function mapInit(){
    var opt = {  
        level: 15, //設置地圖縮放級別    
       // center: new AMap.LngLat(116.397428, 39.90923) //設置地圖中心點   
    } ;
    mapObj = new AMap.Map("iMap", opt);  
    
    AMap.event.addListener(mapObj,'click',getLnglat); //點擊事件
    
    initFlagShop();
    
    //mapObj.setFitView();//把全部的標記點所有顯示出來，因此會有所縮放,//不知爲啥，會報錯
}
function geocoder() {
    
    regeocoder(lnglatXY);//經過火星座標獲取地址名稱，iner進dom
   
    //添加標記點
    var pMarker = new AMap.Marker({
        position: lnglatXY,
        title: '選中點',
        map:mapObj
    });
    
}

//鼠標點擊，獲取經緯度座標  
function getLnglat(e){    
    mapObj.clearMap();//應該是清除座標的意思
    initFlagShop();
    var x = e.lnglat.getLng();
    var y = e.lnglat.getLat(); 
    document.getElementById("lnglat").innerHTML = x + "," + y;
    
    lnglatXY = new AMap.LngLat(x,y);
    geocoder();
}
</script>


<script type="text/javascript">     
    //逆地理位置編碼（火星座標---->地址）
    function regeocoder(lnglatXY) {  //逆地理編碼
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });        
        geocoder.getAddress(lnglatXY, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });        
      //  mapObj.setFitView();
    }
    function geocoder_CallBack(data) {
        var address = data.regeocode.formattedAddress; //返回地址描述
        document.getElementById("iAddress").innerHTML = address;
    }
</script>

<script type="text/javascript">     
 
    //初始化標記點
    function initFlagShop(){
           //假數據
           var shops = [{L: 23.123678, I: 113.28342600000002, lng: 113.283426, lat: 23.123678},
                        {L: 23.124783, I: 113.287375, lng: 113.287375, lat: 23.124783}];
        
         //在地圖上添加點標記
        var markers = []; 
        for (var i = 0; i < shops.length; i += 1) {
            var marker;            
            marker = new AMap.Marker({
                    position: shops[i],
                    title: '已被選做商戶的點',
                    map:mapObj
            });
        } 
        
    }
    
</script>
</html>

js真的是門有點散漫自由的語言，不像java那麼嚴謹規範。javascript

相關標籤/搜索

每日一句

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