SpringBoot整合Mybatis实现高德地图定位并将数据存入数据库

最新推荐文章于 2024-06-27 20:35:50 发布

一叶知秋乔一

最新推荐文章于 2024-06-27 20:35:50 发布

阅读量1.9k

点赞数 5

本文链接：https://blog.csdn.net/PXYYOONA/article/details/112261627

版权

第一步配置yml文件

server:
  port: 8080
spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/spring?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    content-type: text/html
    mode: HTML5

mybatis:
  mapper-locations: classpath:mapping/GaoDe.xml
  type-aliases-package: car2021.winter.com.demo.entity

logging:
  file:
    name: car2021.winter.log

第二步对Mybatis进行配置，并将实体映射。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="car2021.winter.com.demo.mapper.GaoDeMapper">
    <resultMap id="GaoDeMap" type="car2021.winter.com.demo.entity.GaoDe">
        <result column="id" jdbcType="INTEGER" property="id"></result>
        <result column="time" jdbcType="VARCHAR" property="time"></result>
        <result column="Longitude" jdbcType="DOUBLE" property="Longitude"></result>
        <result column="Latitude" jdbcType="DOUBLE" property="Latitude"></result>
        <result column="Position" jdbcType="VARCHAR" property="Position"></result>
    </resultMap>

    <insert id="insertGaoDe">
        insert into GaoDe (time ,Longitude,Latitude,Position) values(#{time},#{Longitude},#{Latitude},#{Position})
    </insert>

</mapper>

第三步写HTML，并引入自己的高德API（需要申请key）

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>高德地图</title>
    <style type="text/css">
        body {
    
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            font-size: 12px;
        }

        #mapContainer {
    
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #tip {
    
            background-color: #fff;
            border: 1px solid #ccc;
            padding-left: 10px;
            padding-right: 2px;
            position: absolute;
            min-height: 65px;
            top: 10px;
            font-size: 12px;
            right: 10px;
            border-radius: 3px;
            overflow: hidden;
            line-height: 20px;
            min-width: 400px;
        }

        #tip input[type="button"] {
    
            background-color: #0D9BF2;
            height: 25px;
            text-align: center;
            line-height: 25px;
            color: #fff;
            font-size: 12px;
            border-radius: 3px;
            outline: none;
            border: 0;
            cursor: pointer;
        }

        #tip input[type="text"] {
    
            height: 25px;
            border: 1px solid #ccc;
            padding-left: 5px;
            border-radius: 3px;
            outline: none;
        }

        #pos {
    
            height: 70px;
            background-color: #fff;
            padding-left: 10px;
            padding-right: 10px;
            position: absolute;
            font-size: 12px;
            right: 10px;
            bottom: 30px;
            border-radius: 3px;
            line-height: 30px;
            border: 1px solid #ccc;
        }

        #pos input {
    
            border: 1px solid #ddd;
            height: 23px;
            border-radius: 3px;
            outline: none;
        }

        #result1 {
    
            max-height: 300px;
        }
    </style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
    <b>当前位置</b>
    <input type="text" id="keyword1" name="keyword1" value=""  onkeydown="keydown(event)" style="width: 95%"/>
    <br>
    <b>请输入关键字：</b>
    <input type="text" id=