整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

如何在Spring Boot + Vue项目中集成和使用地图API

Spring Boot + Vue的项目中集成百度地图API，并实现前后端数据交互，是一个常见的需求。以下是实现这一功能的详细步骤，包括前端Vue的配置、百度地图API的使用，以及后端Spring Boot的准备工作。

前端部分（Vue）

1. 选择和引入百度地图API

百度地图API可以通过在页面中直接引入脚本的方式进行使用。

2. 安装和配置Vue项目

如果你的Vue项目尚未搭建，可以通过以下命令创建一个新的Vue项目：

vue create map-demo
cd map-demo

在项目中安装axios，用于前后端交互：

npm install axios

3. 在Vue项目中引入百度地图API



在public/index.html中添加百度地图的脚本引入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>map-demo</title>
    <!-- 引入百度地图API -->
    <script src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图API密钥"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but map-demo doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
  </body>
</html>

4. 创建地图组件


在src目录下创建一个components/Map.vue组件：

<template>
  <div id="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

<script>
export default {
  name: 'Map',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      const map = new BMap.Map('mapContainer');
      const point = new BMap.Point(116.404, 39.915); // 设置初始点（北京天安门）
      map.centerAndZoom(point, 12); // 初始化地图，设置中心点及缩放级别
      map.addControl(new BMap.NavigationControl()); // 添加放大缩小控件
      map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
      map.enableScrollWheelZoom(true); // 启用滚轮放大缩小
      
      // 添加标记
      const marker = new BMap.Marker(point);
      map.addOverlay(marker);

      // 信息窗口
      const infoWindow = new BMap.InfoWindow("<p>这是北京天安门</p>");
      marker.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, point);
      });
    }
  }
}
</script>

<style>
  #mapContainer {
    width: 100%;
    height: 500px;
  }
</style>

5. 使用地图组件

在src/App.vue中引入和使用Map.vue组件：

<template>
  <div id="app">
    <Map />
  </div>
</template>

<script>
import Map from './components/Map.vue';

export default {
  name: 'App',
  components: {
    Map
  }
}
</script>

后端部分（Spring Boot）

1. 创建Spring Boot项目

可以使用Spring Initializr（https://start.spring.io/）或者通过IDE创建一个Spring Boot项目，选择以下依赖项：

  • Spring Web
  • Spring Data JPA
  • MySQL Driver

2. 配置数据库连接

在src/main/resources/application.properties中添加数据库配置：

spring.datasource.url=jdbc:mysql://localhost:3306/yourdatabase
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLDialect

3. 创建数据实体和仓库

创建一个实体类，例如Location：

package com.example.mapdemo.entity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Location {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private double latitude;
    private double longitude;

    // getters and setters
}

创建一个仓库接口：

package com.example.mapdemo.repository;

import com.example.mapdemo.entity.Location;
import org.springframework.data.jpa.repository.JpaRepository;

public interface LocationRepository extends JpaRepository<Location, Long> {
}

4. 创建控制器

在com.example.mapdemo.controller包中创建一个控制器类：

package com.example.mapdemo.controller;

import com.example.mapdemo.entity.Location;
import com.example.mapdemo.repository.LocationRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/locations")
@CrossOrigin // 允许跨域请求
public class LocationController {
    @Autowired
    private LocationRepository locationRepository;

    @GetMapping
    public List<Location> getAllLocations() {
        return locationRepository.findAll();
    }

    @PostMapping
    public Location addLocation(@RequestBody Location location) {
        return locationRepository.save(location);
    }
}

前后端交互

前端通过axios与Spring Boot后端进行交互，例如在地图上展示数据库中的所有位置。

1. 安装和配置axios

首先安装axios：

npm install axios

在src/main.js中配置axios基础URL：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

Vue.config.productionTip = false;

axios.defaults.baseURL = 'http://localhost:8080/api';

new Vue({
  render: h => h(App),
}).$mount('#app');

2. 修改地图组件以显示位置

在Map.vue中，通过axios获取位置数据并显示在地图上：

<template>
  <div id="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Map',
  mounted() {
    this.initMap();
    this.fetchLocations();
  },
  data() {
    return {
      map: null,
      markers: []
    };
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('mapContainer');
      const point = new BMap.Point(116.404, 39.915);
      this.map.centerAndZoom(point, 12);
      this.map.addControl(new BMap.NavigationControl());
      this.map.addControl(new BMap.MapTypeControl());
      this.map.enableScrollWheelZoom(true);
    },
    fetchLocations() {
      axios.get('/locations')
        .then(response => {
          const locations = response.data;
          locations.forEach(location => {
            const point = new BMap.Point(location.longitude, location.latitude);
            const marker = new BMap.Marker(point);
            this.map.addOverlay(marker);
            this.markers.push(marker);

            const infoWindow = new BMap.InfoWindow(`<p>${location.name}</p>`);
            marker.addEventListener('click', () => {
              this.map.openInfoWindow(infoWindow, point);
            });
          });
        })
        .catch(error => {
          console.error("There was an error fetching the locations!", error);
        });
    }
  }
}
</script>

<style>
  #mapContainer {
    width: 100%;
    height: 500px;
  }
</style>

测试

  1. 启动后端Spring Boot应用，确保它在8080端口运行，并且可以访问数据库。
  2. 启动前端Vue应用。
  3. 打开浏览器，访问http://localhost:8080，你应该会看到地图，并且地图上标记了数据库中的位置。

总结

通过上述步骤，你可以在Spring Boot + Vue项目中集成百度地图API，并通过后端提供的API显示和管理地图上的位置数据。这种前后端分离的开发模式，可以提高开发效率和代码的可维护性。

们在网站建好后，关键词也做完了，我们还需要做网站地图sitemap,网站地图是干嘛的呢，主要有两个作用，一个是给用户看，另一种是给搜索引擎看，格式分别是html和xml。

网站地图

今天主要讲什么xml网站地图怎么做，需要注意什么问题，现在网上有很多的网站地图制作生成的，网站地图主要就是列出网站所有要被搜索引擎收录的链接。

举例

<?xml version="1.0" encoding="UTF-8"?> //文件必须是utf8编码

<urlset>

<url>

<loc>http://*******</loc> //你的域名

<lastmod>2021-05-24</lastmod> //发布时间

<changefreq>daily</changefreq> // 告诉搜索引擎更新周期

<priority>1.0</priority> //优先级

</url>

</urlset>

网站地图标签都有哪些意思呢

urlset：声明文件所使用的Sitemap协议版本，是必须要的标签

url：是它下面所有网址的母标签，是必须要的标签

loc：列出页面完整的url，是必须要的标签

lastmod：表示页面最后一次更新时间，此标签可选。

priority：可选标签，表示链接的相对重要程度

changefreq：代表文件的更新频率，是可选标签。可以有以下值：

changefreq标签值

always：表示一直变动，指每次访问页面内容都不同

hourly：每小时

daily：每天

weekly：每周

monthly：每月

yearly：每年

never：从不改变

需要注意的是这个设置的更新频率是告诉搜索引擎你的更新时间，但不代表搜索引擎每天都会来抓取你的链接，所以百度站长里面也会有一项主动提交链接的入口，建议站长每天都把新的链接主动提交给搜索引擎，xml网站地图最多可以列出5万个URL，并且文件不能太大，对于新站的话，一个文件是足够的，老站的话链接也很多，也可以分成多个网站地图提交。

现在网上有很多地图生成器，而且有的网站系统也是有很多的插件可以下载。#网站地图#

文由ScriptEcho平台提供技术支持

项目地址：传送门

Vue 中使用 InMap 创建动态轨迹地图

应用场景介绍

动态轨迹地图广泛应用于物流追踪、车辆管理、人员定位等场景，可直观展示移动对象的历史轨迹和实时位置。本代码示例展示了如何使用 Vue 框架和 InMap 库创建一个动态轨迹地图，实现轨迹展示、实时更新和交互功能。

代码基本功能介绍

该代码的主要功能包括：

  • 加载 InMap 库并创建地图实例
  • 从外部数据源加载轨迹数据
  • 创建轨迹线覆盖物并添加到地图
  • 设置轨迹线样式和交互事件
  • 实时更新轨迹数据，反映移动对象的最新位置

功能实现步骤及关键代码分析

1. 加载 InMap 库和创建地图实例

onMounted(async () => {
  let jsUrls = [
    'https://api.map.baidu.com/getscript?v=2.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240108120844',
    'https://registry.npmmirror.com/inmap/2.3.3/files/dist/inmap.min.js',
  ]
  await Promise.all(jsUrls.map((js) => loadJavascript(js)))

var map = new inMap.Map({
id: 'allmap',
skin: 'Blueness',
center: [-22.053354, 27.353393],
zoom: {
value: 3,
show: true,
max: 22,
min: 3,
},
})
})

此代码块负责加载 InMap 库和创建地图实例。首先，异步加载必要的 JavaScript 文件。然后，使用 inMap.Map 构造函数创建地图实例，并指定地图容器 ID、皮肤、中心点和缩放级别等参数。

2. 加载轨迹数据

var overlay = new inMap.LineStringOverlay({
  data: data.map(function (item, index) {
    item.name = '轨迹' + index
    item.count = index
    return item
  }),
})

此代码块加载外部轨迹数据并将其添加到地图中。它使用 inMap.LineStringOverlay 构造函数创建一个轨迹线覆盖物，并传入轨迹数据。轨迹数据以数组形式提供，每个元素包含轨迹点的经度、纬度和时间戳等信息。

3. 设置轨迹线样式和交互事件

overlay.setStyle({
  normal: {
    borderColor: 'rgba(255, 250, 50, 0.3)',
    borderWidth: 0.7,
    shadowColor: 'rgba(255, 250, 50, 1)',
    shadowBlur: 20,
  },
})

此代码块设置轨迹线的样式，包括边框颜色、宽度、阴影颜色和模糊度。

overlay.setEvent({
  onState(state) {
    console.log(state)
  },
})

此代码块设置轨迹线的交互事件。当用户悬停、单击或拖动轨迹线时，会触发 onState 事件，并将当前状态输出到控制台。

4. 实时更新轨迹数据

// 假设您有实时更新轨迹数据的逻辑
// 在此示例中，我们模拟通过 WebSocket 接收数据
let socket = new WebSocket('ws://localhost:8080')
socket.onmessage = (event) => {
  let newData = JSON.parse(event.data)
  overlay.setData(newData)
}

此代码块演示了如何实时更新轨迹数据。它模拟了一个 WebSocket 连接，用于接收更新后的轨迹数据。当收到新数据时，它会使用 setData 方法更新轨迹线覆盖物的轨迹数据。

总结与展望

开发这段代码的过程让我深入了解了 Vue 中使用 InMap 创建动态轨迹地图的技术。通过分析关键代码，我掌握了加载 InMap 库、创建地图实例、加载轨迹数据、设置轨迹线样式和交互事件以及实时更新轨迹数据的步骤。

未来，该卡片功能可以进一步拓展和优化，例如：

  • 集成更多数据源，支持从多种来源加载轨迹数据
  • 优化数据处理和更新算法，提高实时性的同时降低内存消耗
  • 添加更多交互功能，例如轨迹回放、轨迹分析和导出
  • 更多组件：

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址：传送门

微信搜索ScriptEcho了解更多


在线咨询
上一篇：一篇文章带你了解CSS 文本样式
下一篇：界面组件DevExpress WinForms v23.1 - 全新升级HTML &amp; CSS模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 东城区 文登 遵义 桃山区 湘阴县 大邑县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服