移動端開發APPCAN呼叫高德地圖API實現定位等功能

阿新 • • 發佈：2019-01-17

最近專案在做移動端，做了點地圖應用，發現網上案例比較少，研究之後，給小夥伴們分享一份：

看看程式碼吧，有不同的，call我嘍：

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Getters Started</title>
<!-- - <script src="https://unpkg.com/

[email protected]"></script> -->
<style>
#mainMap {
width: 390px;
height: 450px
}

#resultMapInfo {
position: absolute;
left: 0;
top: 30px;
z-index: 999;
}
</style>
</head>

<body>

<div id="resultMapInfo">請使用4G網路獲取定位精確度高</div>
<div id="mainMap"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.3&key=243687cce3d5ac3f7a3b4bb90a97fda1"></script>

<script>
// 例項化地圖，命名定位外掛例項、標記例項、地理編碼例項、輸出變數
var map = new AMap.Map('mainMap', {
resizeEnable: true,
zoom: 16
}),
geolocation = null,
Marker = null,
geocoder = null,
result = document.getElementById('resultMapInfo');
// 新增地圖全域性移動事件
// 移動中
AMap.event.addListener(map, 'dragging', function() {
Marker.setPosition(map.getCenter())
});
// 停止移動
AMap.event.addListener(map, 'dragend', function() {
console.log(map.getCenter())
// 利用地圖地理編碼查詢地址
geocoder.getAddress(map.getCenter(), function(status, data) {
if (status === 'complete' && data.info === 'OK') {
//獲得了有效的地址資訊:
//即，
var str = '<p>獲取成功</p>';
str += '<p>當前位置：' + data.regeocode.formattedAddress + '</p>';
result.innerHTML = str;
console.log(data.regeocode.formattedAddress)
console.log(map.getCenter().getLat())
console.log(map.getCenter().getLng())
} else {
//獲取地址失敗
var str = '<p>定位失敗</p>';
str += '<p>錯誤資訊：'
switch (data.info) {
case 'INVALID_UESR_KEY':
str += '使用者key非法或過期';
break;
case 'SERVICE_UNAVAILABLE':
str += '請求服務不可用';
break;
case 'INSUFFICIENT_PRIVILEGES':
str += '無許可權訪問此服務';
break;
case 'INVALID_PARAMS':
str += '請求引數非法';
break;
default:
str += '無網路或其他未知錯誤';
break;
}
str += '，請重新獲取當前位置。</p>';
result.innerHTML = str;
}
});
Marker.setPosition(map.getCenter())
Marker.setAnimation('AMAP_ANIMATION_DROP')
});

// 載入地理位置編碼外掛
AMap.service('AMap.Geocoder', function() { //回撥函式
//例項化Geocoder
geocoder = new AMap.Geocoder({
city: "010" //城市，預設：“全國”
});
//TODO: 使用geocoder 物件完成相關功能
});
// 載入定位外掛
map.plugin('AMap.Geolocation', function() {
// 初始化定位外掛
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，預設:true
timeout: 10000, //超過10秒後停止定位，預設：無窮大
maximumAge: 0, //定位結果快取0毫秒，預設：0
convert: true, //自動偏移座標，偏移後的座標為高德座標，預設：true
showButton: true, //顯示定位按鈕，預設：true
buttonPosition: 'LB', //定位按鈕停靠位置，預設：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設定的停靠位置的偏移量，預設：Pixel(10, 20)
showMarker: false, //定位成功後在定位到的位置顯示點標記，預設：true
showCircle: false, //定位成功後用圓圈表示定位精度範圍，預設：true
panToLocation: true, //定位成功後將定位到的位置作為地圖中心點，預設：true
zoomToAccuracy: true //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，預設：false
});
// 把定位外掛加入地圖例項
map.addControl(geolocation);

// 新增地圖全域性定位事件
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位資訊
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯資訊

// 呼叫定位
geolocation.getCurrentPosition();
});

/*
*解析定位結果
*/
function onComplete(data) {
Marker = null;
var str = '<p>定位成功</p>';
//str += '<p>經度：' + data.position.getLng() + '</p>';
//str += '<p>緯度：' + data.position.getLat() + '</p>';
str += '<p>精度：' + data.accuracy + ' 米</p>';
//str += '<p>是否經過偏移：' + (data.isConverted ? '是' : '否') + '</p>';
str += '<p>當前位置：' + data.formattedAddress + '</p>';
//str += '<p>' + data.addressComponent.province + data.addressComponent.city + data.addressComponent.district + data.addressComponent.township + data.addressComponent.street + data.addressComponent.streetNumber + '</p>';
// 初始化標記
if (Marker) {
// 標記存在則把地圖中心點設定給標記
Marker.setPosition(map.getCenter())
Marker.setAnimation('AMAP_ANIMATION_DROP')
} else {
// 標記不存在則例項化一個新的標記，且把當前地圖中心點設定給標記
Marker = new AMap.Marker({
position: map.getCenter(),
animation: 'AMAP_ANIMATION_DROP'
});
// 把標記加入地圖例項
Marker.setMap(map);
}

result.innerHTML = str;
};
/*
*解析定位錯誤資訊
*/
function onError(data) {
var str = '<p>定位失敗</p>';
str += '<p>錯誤資訊：'
switch (data.info) {
case 'PERMISSION_DENIED':
str += '瀏覽器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '無法獲得當前位置';
break;
case 'TIMEOUT':
str += '定位超時';
break;
default:
str += '無網路或其他未知錯誤';
break;
}
str += '，請重新獲取當前位置。</p>';
// 初始化標記
if (Marker) {
// 標記存在則把地圖中心點設定給標記
Marker.setPosition(map.getCenter())
Marker.setAnimation('AMAP_ANIMATION_DROP')
} else {
// 標記不存在則例項化一個新的標記，且把當前地圖中心點設定給標記
Marker = new AMap.Marker({
position: map.getCenter(),
animation: 'AMAP_ANIMATION_DROP'
});
// 把標記加入地圖例項
Marker.setMap(map);
}
result.innerHTML = str;
};
</script>
</body>

</html>

移動端開發APPCAN呼叫高德地圖API實現定位等功能

移動端開發APPCAN呼叫高德地圖API實現定位等功能

H5開發：呼叫高德地圖api實現H5定位功能

java呼叫高德地圖API開發，高德線上地圖開發——未完待續

vue結合vue-amap呼叫高德地圖api

SpringCloud之如何在專案中呼叫高德地圖API

如何呼叫高德地圖api

呼叫高德地圖Api顯示地圖

JAVA呼叫高德地圖API實踐

使用高德地圖API無法定位

微信小程式----map元件實現（高德地圖API實現wx.chooseLocation（OBJECT））

微信小程式-基於高德地圖API實現天氣元件(動態效果)

iOS·採用第三方(百度地圖SDK)實現定位等功能開發

js呼叫百度地圖api實現定位

2017高德地圖API WEB開發（key申請，地圖搭建）簡約教程

ReactNative呼叫高德地圖流程

Cesium 呼叫高德地圖天地圖本地瓦片資料

高德地圖API呼叫和標準（轉）

android呼叫高德地圖的方法

vue2呼叫高德地圖(Amap)及其UI元件

Android呼叫高德地圖app語音導航

移動端開發APPCAN呼叫高德地圖API實現定位等功能

相關推薦