文章首推
今日主题:高德地图调用
环境
- IDEA
- springboot
- maven3
实现过程
1、首先我们需要登录高德开发平台：https://lbs.amap.com/
2、控制台->应用管理->创建新应用，这里会产生一个key,我们后面开发中会用到
3、大家创建一个springboot工程,根据自己需要导入一些坐标，我的坐标如下：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://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 {800px; height: 500px; text-align: center}
index.html:
这个界面就要分情况写了
参考了官方开发文档：https://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="http://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="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style type="text/css">
html,body,#container{
height:100%;
}
.info{
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="https://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="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,body,#container{
height:100%;
}
.info{
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="https://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="https://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="https://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>
好的，到这里就结束了，有时间再和大家探讨更深入的东西吧
