24

高德地图调用

 3 years ago
source link: http://www.cnblogs.com/KING-TING/p/13867811.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

文章首推

今日主题:高德地图调用

环境

  • IDEA
  • springboot
  • maven3

实现过程

1、首先我们需要登录高德开发平台： https://lbs.amap.com/
iaaayyB.png!mobile

2、 控制台 -> 应用管理 -> 创建新应用 ，这里会产生一个 key ,我们后面开发中会用到

2UNneaU.png!mobile

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、大家可以参考一下我的工程目录结构

Njiymqa.png!mobile

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:

这个界面就要分情况写了

参考了官方开发文档： 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{
           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="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:端口,就可以看到下面这个，但是这种定位不准，他只能知道你在哪个城市

BzIjQf3.png!mobile 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{
            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="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>

这种图中多了一个定位按钮，定位更加准确了

mqQvAnB.png!mobile

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>

IZJjUjb.png!mobile 好的，到这里就结束了，有时间再和大家探讨更深入的东西吧

欢迎关注：鹏哥的世界
vU3uAzM.gif!mobile

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK