zoukankan html css js c++ java

高德地图调用

文章首推

支付宝接口对接

高德地图调用

验证码登录

QQ邮箱登录

今日主题:高德地图调用

环境

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>

在这里插入图片描述
好的，到这里就结束了，有时间再和大家探讨更深入的东西吧

欢迎关注：java后端指南

查看全文

相关阅读:
There is an overlap in the region chain修复
 There is an overlap in the region chain
region xx not deployed on any region server
python 中的re模块，正则表达式
 TCP粘包问题解析与解决
 yield from
Git push提交时报错Permission denied(publickey)...Please make sure you have the correct access rights and the repository exists.
mysql 中Varchar 与char的区别
 Mysql 字符集及排序规则
 请实现一个装饰器，限制该函数被调用的频率，如10秒一次

原文地址：https://www.cnblogs.com/KING-TING/p/13867811.html