高德地圖調用
文章首推
今日主題:高德地圖調用
環境
- IDEA
- springboot
- maven3
實現過程
1、首先我們需要登錄高德開發平台：//lbs.amap.com/
2、控制台->應用管理->創建新應用，這裡會產生一個key,我們後面開發中會用到
3、大家創建一個springboot工程,根據自己需要導入一些坐標，我的坐標如下：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="//maven.apache.org/POM/4.0.0" xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="//maven.apache.org/POM/4.0.0 //maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.KING</groupId>
<artifactId>gaode_map</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>gaode_map</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
4、大家可以參考一下我的工程目錄結構
5、我就偷懶了，直接將控制器寫在啟動類中
@SpringBootApplication
@Controller
public class GaodeMapApplication {
@GetMapping("/")
public String toIndex(){
return "index.html";
}
public static void main(String[] args) {
SpringApplication.run(GaodeMapApplication.class, args);
}
}
map.css:
#container {width:800px; height: 500px; text-align: center}
index.html:
這個界面就要分情況寫了
參考了官方開發文檔：//lbs.amap.com/api/javascript-api/guide/services/geolocation
我們今天講的是怎麼調用他的定位功能，定位方式分為以下幾種：
- 地圖初始化加載定位到當前城市
- 瀏覽器定位
- IP定位獲取當前城市信息
現在咋們分別來看看怎麼寫
這三種方式都要引入css文件和js文件
<link rel="stylesheet" href="./styles/map.css" />
<!--key填寫自己的-->
<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.7&key=key填寫自己的"></script>
6、地圖初始化加載定位到當前城市
<!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>
<link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style type="text/css">
html,body,#container{
height:100%;
}
.info{
width:20rem;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<p>在初始化地圖時，如果center屬性缺省，地圖默認定位到用戶所在城市的中心</p><hr>
<p id='adcode'></p>
</div>
<script type="text/javascript"
src="//webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script type="text/javascript">
//初始化地圖時，若center屬性缺省，地圖默認定位到用戶所在城市的中心
var map = new AMap.Map('container', {
resizeEnable: true
});
document.getElementById('adcode').innerHTML='當前城市adcode：'+map.getAdcode()+'<br>'+
'當前中心點：'+map.getCenter()
</script>
</body>
</html>
啟動springboot，訪問localhost:端口,就可以看到下面這個，但是這種定位不準，他只能知道你在哪個城市
7、瀏覽器定位
我們可以通過高德JS API提供了AMap.Geolocation插件來實現定位
<!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>瀏覽器精確定位</title>
<link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,body,#container{
height:100%;
}
.info{
width:26rem;
}
</style>
<body>
<div id='container'></div>
<div class="info">
<h4 id='status'></h4><hr>
<p id='result'></p><hr>
<p >由於眾多瀏覽器已不再支持非安全域的定位請求，為保位成功率和精度，請升級您的站點到HTTPS。</p>
</div>
<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true
});
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默認:true
timeout: 10000, //超過10秒後停止定位，默認：5s
buttonPosition:'RB', //定位按鈕的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
zoomToAccuracy: true, //定位成功後是否自動調整地圖視野到定位點
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位結果
function onComplete(data) {
document.getElementById('status').innerHTML='定位成功'
var str = [];
str.push('定位結果：' + data.position);
str.push('定位類別：' + data.location_type);
if(data.accuracy){
str.push('精度：' + data.accuracy + ' 米');
}//如為IP精確定位結果則沒有精度信息
str.push('是否經過偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('result').innerHTML = str.join('<br>');
}
//解析定位錯誤信息
function onError(data) {
document.getElementById('status').innerHTML='定位失敗'
document.getElementById('result').innerHTML = '失敗原因排查信息:'+data.message;
}
</script>
</body>
</html>
這種圖中多了一個定位按鈕，定位更加準確了
8、IP定位獲取當前城市信息
由於我的瀏覽器關閉了定位權限，所以他無法獲取我的經緯度，大家可以在代碼中自己寫入對應的經緯度就可以定位了
<!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>
<link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style type="text/css">
html,body,#container{
height:100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<p id='info'></p>
</div>
<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key=您申請的key值&plugin=AMap.CitySearch"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true,
//寫需要定位的經緯度坐標
center: [116.397428, 39.90923],
zoom: 13
});
//獲取用戶所在城市信息
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('info').innerHTML = '您當前所在城市：'+cityinfo;
//地圖顯示當前城市
map.setBounds(citybounds);
}
} else {
document.getElementById('info').innerHTML = result.info;
}
});
}
showCityInfo();
</script>
</body>
</html>
好的，到這裡就結束了，有時間再和大家探討更深入的東西吧
歡迎關註：鵬哥的世界
