springboot——java调用高德地图

最新推荐文章于 2024-06-12 09:56:23 发布

HadwinLing

最新推荐文章于 2024-06-12 09:56:23 发布

阅读量8.3k

点赞数 5

本文链接：https://blog.csdn.net/Alingyuzi/article/details/106224951

版权

java 专栏收录该内容

102 篇文章 1 订阅

订阅专栏

环境准备
开发工具：IntellJ IDEA
数据库：MySQL 5.7.22
技术框架：Spring Boot(2.2.0.RELEASE) + Mybatis Plus(3.2.0)
第三方地图：高德地图官方API
构建项目
添加依赖

<?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.2.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.gem</groupId>
    <artifactId>map-app</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>map-app</name>
    <description>map-app project for Spring Boot</description>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>11</java.version>
<!--        <mysql.connector.version>8.0.6</mysql.connector.version>-->
        <mybatis.plus.version>3.2.0</mybatis.plus.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>

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatis.plus.version}</version>
        </dependency>
        <!--mysql驱动-->
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.15</version>
        </dependency>


        <!-- json-lib -->
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </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>

配置yml文件


#服务器配置
server:
  port: 9000
#  servlet:
#    context-path: /map-app

#数据库相关配置:
spring:
  datasource:
      url: jdbc:mysql://localhost:3306/map_hotel?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=CTT
      username: root
      password: root
      driver-class-name: com.mysql.cj.jdbc.Driver

#mybatis plus配置
mybatis-plus:
  # 如果是放在src/main/java目录下 classpath:/com/yourpackage/*/mapper/*Mapper.xml
  # 如果是放在resource目录 classpath:/mapper/*Mapper.xml
#  mapper-locations: classpath*:mapper/*Mapper.xml
  #实体扫描，多个package用逗号或者分号分隔
  typeAliasesPackage: com.gem.entity
  global-config:
#    #主键类型  0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";
    id-type: 0
#    #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
    field-strategy: 0
#    #驼峰下划线转换
#    db-column-underline: true
#    #mp2.3+ 全局表前缀 mp_
#    #table-prefix: mp_
#    #刷新mapper 调试神器
#    #refresh-mapper: true
#    #数据库大写下划线转换
#    #capital-mode: true
#    # Sequence序列接口实现类配置
#    key-generator: com.baomidou.mybatisplus.incrementer.OracleKeyGenerator
#    #逻辑删除配置（下面3个配置）
    logic-delete-value: 1
    logic-not-delete-value: 0
#    sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjector
#    #自定义填充策略接口实现
#    meta-object-handler: com.baomidou.springboot.MyMetaObjectHandler
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
#    #配置返回数据库(column下划线命名&&返回java实体是驼峰命名)，自动匹配无需as（没开启这个，SQL需要写as： select user_id as userId）
#    map-underscore-to-camel-case: true
    cache-enabled: true
#    #配置JdbcTypeForNull, oracle数据库必须配置
#    jdbc-type-for-null: 'null'

项目结构
在这里插入图片描述
准备数据
为了首页地图的加载效果，提前建表准备数据，

开发Controller
定义IndexController.java类，并创建映射方法，示例代码如下：

@Controller
@RequestMapping("/home")
public class IndexController {
    @RequestMapping("/index")
    public String index(Model model) {
        Hotel hotel = new Hotel();
        List<Hotel> hotelList = hotel.selectList(new QueryWrapper<>());
        List list = new ArrayList();
        for (Hotel ho: hotelList) {
            JSONObject object = new JSONObject();
            BigDecimal[] point = {ho.getLongitude(),ho.getLatitude()};
            object.put("position", point);
            object.put("name", ho.getName());
            object.put("img", ho.getImg());
            object.put("detailAddress", ho.getDetailAddress());
            list.add(object);
        }
        model.addAttribute("hotelList",list);
        model.addAttribute("urlFlag","index");
        return "index";
    }
}

定义视图
页面结构

<body>
    <!--导航栏-->
    <div th:include="common/header :: html"></div>
    <div  id="container"></div>
</body>

导航部分以外部文件引入的方式处理。

公共头部结构
部分核心代码如下:

<div class="container boxx">
    <br><br>
    <div class="row">
        <div class="col-md-3">
            <img th:src="@{/image/logo.png}" width="200px" style="margin-top: -10px" />
        </div>
        <div class="col-md-7 col-md-offset-1">

            <ul class="nav">
                <li class="navli">
                    <a th:class="${urlFlag eq 'index' ? 'active-a' : ''}" th:href="@{/home/index}" class="hvr-shutter-out-vertical">首页</a>
                </li>
                <li class="navli">
                    <a th:class="${urlFlag eq 'hotel' ? 'active-a' : ''}" href="javascript:;" onclick="managerHotel()" class="hvr-shutter-out-vertical">管理酒店</a>
                </li>
            </ul>
        </div>
    </div>
    <br>
</div>

引入地图js文件

 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.10&key=ccc557b111dd155750089e029fe3126e&plugin=AMap.AdvancedInfoWindow"></script>

地图样式文件：main1119.css
引入脚本：其中key=ccc557b111dd155750089e029fe3126e,该key值开发时需要自行申请

创建地图
（1）在js中创建地图对象，并放置到页面

元素中，示例代码：

<script type="text/javascript" th:inline="javascript">
    var map = new AMap.Map("container", {resizeEnable: true});
</script>

AMap.Map对象中的参数container即为页面元素的id值，可以自行修改。
（2）设置定位

将后台返回的酒店集合对象在地图中以定位的方式显示。使用map对象的插件设置，示例代码：

//定位
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: true, //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        radius: 1000 //范围，默认：500
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
    AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});

ips: 该段配置有官方文档提供，需要设置的参数可自行调整。

在上段代码中,这行代码AMap.event.addListener(geolocation, ‘complete’, onComplete);设置定位成功的回调。

（3）解析定位
定义onComplete回调函数，示例代码：

//解析定位结果
function onComplete(data) {
    if(data.status == 1) {
        $("#addressInput").val(data.formattedAddress);
        sessionStorage.setItem("dingWei-lng", data.position.getLng());
        sessionStorage.setItem("dingWei-lat", data.position.getLat());
    }
}

（4）获取定位数据

定义变量接收后台的酒店集合数据，示例代码：

var markers = hotelList;

其中hotelList可使用行内表达式提取request对象中的值。示例代码：

<script th:inline="javascript">
    /*<![CDATA[*/
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    var hotelList=[[${hotelList}]];
    /*]]>*/
</script>

（5）创建定位信息

将集合中对象的经纬度等信息绑定到定位锚点上，示例代码：

for(var i = 0, marker; i < markers.length; i++) {
    var marker = new AMap.Marker({
        position: markers[i].position,
        icon: startIcon,
        map: map
    });
    marker.content = '<div class="info-title">'+markers[i].name+'</div><div class="info-content">' +
        '<img style="width: 100px;height: 67px;" src="' + contextPath + '/image/hotel/'+ markers[i].img +'">' +
        '酒店地址：'+markers[i].detailAddress+'<br/>' +
        '<a target="_blank" href= "javascript:void(0);">点击查看酒店详情</a></div>';
    marker.on('click', markerClick);
    marker.emit('click', {target: marker});
}

（5）自定义定位小图标

为了更好的展示效果，可以为定位锚点自定义icon。示例代码：

var startIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(30, 34),
    // 图标的取图地址
    image: contextPath + '/image/marker.png',
    // 图标所用图片大小
    imageSize: new AMap.Size(25, 34),
});

（6）添加点击事件

如果点击不同的锚点时，弹窗显示当前锚点的详细详细。此时可以为锚点添加点击事件，示例代码：

function markerClick(e) {
    infoWindow.setContent(e.target.content);
    infoWindow.open(map, e.target.getPosition());
}

（7）完整js代码

<script th:inline="javascript">
    /*<![CDATA[*/
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    var hotelList=[[${hotelList}]];
    /*]]>*/
</script>
<script type="text/javascript" th:inline="javascript">
    var map = new AMap.Map("container", {resizeEnable: true});
    /**
     * 浏览器定位
     */
    //定位
    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: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            radius: 1000 //范围，默认：500
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
    });

    //解析定位结果
    function onComplete(data) {
        if(data.status == 1) {
            $("#addressInput").val(data.formattedAddress);
            sessionStorage.setItem("dingWei-lng", data.position.getLng());
            sessionStorage.setItem("dingWei-lat", data.position.getLat());
        }
    }

    var markers = hotelList;
    var infoWindow = new AMap.AdvancedInfoWindow({offset: new AMap.Pixel(0, -30)});
    // 创建一个 Icon
    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(30, 34),
        // 图标的取图地址
        image: contextPath + '/image/marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(25, 34),
    });
    for(var i = 0, marker; i < markers.length; i++) {
        var marker = new AMap.Marker({
            position: markers[i].position,
            icon: startIcon,
            map: map
        });
        marker.content = '<div class="info-title">'+markers[i].name+'</div><div class="info-content">' +
            '<img style="width: 100px;height: 67px;" src="' + contextPath + '/image/hotel/'+ markers[i].img +'">' +
            '酒店地址：'+markers[i].detailAddress+'<br/>' +
            '<a target="_blank" href= "javascript:void(0);">点击查看酒店详情</a></div>';
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});
    }

    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();
</script>

在这里插入图片描述

HadwinLing

关注

5
点赞
踩
65

收藏

觉得还不错? 一键收藏
6
评论
springboot——java调用高德地图

环境准备开发工具：IntellJ IDEA数据库：MySQL 5.7.22技术框架：Spring Boot(2.2.0.RELEASE) + Mybatis Plus(3.2.0)第三方地图：高德地图官方API构建项目添加依赖<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XML
复制链接

扫一扫

专栏目录