如何不顯示地圖就獲取位置資料？

酸奶小妹發表於2017-02-03
地圖

使用“同步載入外掛的方式”，引用各類外掛，就可以不建立地圖，直接獲取地圖資料。

 

以下用IP定位做為例子，詳細講述“如何不顯示地圖就獲取當前位置”。

 

引入城市定位外掛，更多外掛與使用方法請見外掛類總覽 

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您的Key&plugin=AMap.CitySearch"></script>

 

例項化城市定位

var citysearch = new AMap.CitySearch();

 

定位結果，如果成功返回城市名稱，如果失敗返回錯誤資訊

citysearch.getLocalCity(function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    document.getElementById('tip').innerHTML = '您當前所在城市：'+cityinfo;
                }
            } else {
                document.getElementById('tip').innerHTML = result.info;
            }
        });

 

截圖

 

全部原始碼

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>根據ip定位</title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.CitySearch"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="顯示當前城市" onClick="javascript:showCityInfo()"/>
</div>
<div id="tip"></div>
<script type="text/javascript">
    //獲取使用者所在城市資訊
    function showCityInfo() {
        //例項化城市查詢類
        var citysearch = new AMap.CitySearch();
        //自動獲取使用者IP，返回當前城市
        citysearch.getLocalCity(function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    document.getElementById('tip').innerHTML = '您當前所在城市：'+cityinfo;
                }
            } else {
                document.getElementById('tip').innerHTML = result.info;
            }
        });
    }
</script>
</body>
</html>
View Code

 

線上示例：http://zhaoziang.com/amap/nomapGetcity.htm

 

相關文章