整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Spring Boot + Vue的項目中集成百度地圖API，并實現前后端數據交互，是一個常見的需求。以下是實現這一功能的詳細步驟，包括前端Vue的配置、百度地圖API的使用，以及后端Spring Boot的準備工作。
百度地圖API可以通過在頁面中直接引入腳本的方式進行使用。
如果你的Vue項目尚未搭建，可以通過以下命令創建一個新的Vue項目：
vue create map-demo
cd map-demo
在項目中安裝axios，用于前后端交互：
npm install axios
在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>
在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>
在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 Initializr（https://start.spring.io/）或者通過IDE創建一個Spring Boot項目，選擇以下依賴項：
在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
創建一個實體類，例如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> {
}
在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后端進行交互，例如在地圖上展示數據庫中的所有位置。
首先安裝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');
在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>
通過上述步驟，你可以在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 庫創建一個動態軌跡地圖，實現軌跡展示、實時更新和交互功能。
該代碼的主要功能包括：
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、皮膚、中心點和縮放級別等參數。
var overlay = new inMap.LineStringOverlay({
data: data.map(function (item, index) {
item.name = '軌跡' + index
item.count = index
return item
}),
})
此代碼塊加載外部軌跡數據并將其添加到地圖中。它使用 inMap.LineStringOverlay 構造函數創建一個軌跡線覆蓋物，并傳入軌跡數據。軌跡數據以數組形式提供，每個元素包含軌跡點的經度、緯度和時間戳等信息。
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 事件，并將當前狀態輸出到控制臺。
// 假設您有實時更新軌跡數據的邏輯
// 在此示例中，我們模擬通過 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了解更多
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
