在现代Web和移动应用中，地图成为了不可或缺的一部分。本文将介绍如何在Vue前端开发中利用高德地图API实现点聚合、自定义信息窗口以及在小程序中打开导航地图的功能。### 使用案例和场景
在进入具体实现之前，需要确保以下准备工作已经完成：
这里有微信小程序需求的需要在添加一个，web和小程序需要分开不能混用。
npm i @amap/amap-jsapi-loader -S
首先，让我们从点聚合开始。
实现效果如下:
更换搜索条件，地图会重新加载点位数据
地图放大后效果：
在整个项目中引入高德地图的JavaScript库，并同时加载了一些插件（AMap.MarkerClusterer、AMap.Autocomplete、AMap.Geocoder、AMap.DistrictSearch）。这些插件提供了一些高级功能，比如标注点聚合、地点自动完成、地理编码、行政区划搜索等
、、
index.html中加入以下代码
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.4.15&key=你注册的key&plugin=AMap.MarkerClusterer,AMap.Autocomplete,AMap.Geocoder,AMap.DistrictSearch"></script>
这个方法用于初始化地图实例。在初始化地图之前，您需要配置一些选项，例如缩放级别、中心点坐标等。这里是具体的解释：
最后，将地图实例存储在组件的map属性中，以便在其他方法中可以访问和操作地图实例。
这个方法用于加载数据并在地图上渲染标记点。具体的解释如下：
这个方法负责创建标记点的聚合器，以便在地图上显示聚合点。下面是该方法的解释：
这个方法负责创建信息窗口的内容，以显示被点击的标记点的详细信息。
这些方法共同协作，实现了在地图上显示聚合标记点和信息窗口的功能。当用户点击一个标记点时，会显示该点的详细信息，以提供更多的交互和信息展示。
<template>
<div>
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-model-item label="公里数范围(KM)">
<div class="input-container">
<a-input-number v-model="distance" :min="0" :max="9999" style="width: 100px" />
<span class="divider">-</span>
<a-input-number v-model="enddistance" :min="0" :max="9999" style="width: 100px" />
</div>
</a-form-model-item>
</a-col>
<a-col :xl="3" :lg="7" :md="8" :sm="24">
<a-form-model-item label="年">
<a-select v-model="year" style="width: 120px;">
<a-select-option value="">无</a-select-option>
<a-select-option v-for="year in yearOptions" :key="year" :value="year">{{ year }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xl="3" :lg="7" :md="8" :sm="24">
<a-form-model-item label="月">
<a-select v-model="month" style="width: 120px;">
<a-select-option value="">无</a-select-option>
<a-select-option v-for="month in monthOptions" :key="month" :value="month">{{ month }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xl="3" :lg="7" :md="8" :sm="24">
<a-form-model-item label="日">
<a-select v-model="day" style="width: 120px;">
<a-select-option value="">无</a-select-option>
<a-select-option v-for="day in dayOptions" :key="day" :value="day">{{ day }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-model-item label="小时(范围)">
<div class="input-container">
<a-select v-model="hour" style="width: 120px;">
<a-select-option value="">无</a-select-option>
<a-select-option v-for="hour in hourOptions" :key="hour" :value="hour">{{ hour }}</a-select-option>
</a-select>
<span class="divider">-</span>
<a-select v-model="hour2" style="width: 120px;">
<a-select-option value="">无</a-select-option>
<a-select-option v-for="hour in hourOptions" :key="hour" :value="hour">{{ hour }}</a-select-option>
</a-select>
</div>
</a-form-model-item>
</a-col>
<a-col :xl="5" :lg="15" :md="18" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
<a-col :xl="7" :lg="15" :md="18" :sm="24">
<!-- <a-select v-model="resolvingPower" placeholder="请选择分辨率" @change="resolvingChange">
<a-select-option v-for="item in resolvingPowerOptions" :key="item.value"
:value="item.value">{{item.label}}
</a-select-option>
</a-select> -->
<a-button type="primary" plain @click="getSignImg">点击截取屏幕</a-button>
</a-col>
</a-row>
</a-form>
</div>
<div id="container">
<slot></slot>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import moment from 'moment'
import html2canvas from 'html2canvas';
import {
getAction,
httpAction,
postAction
} from '../../api/manage'
export default {
props: {
// licence: {
// type: String, // 参数的数据类型
// required: true // 参数是否必需
// }
},
data() {
return {
resolvingPower: '',
canvaswidth: 1.5,
resolvingPowerOptions: [{
value: '1',
label: '1360<=分辨率<1440'
}, {
value: '2',
label: '1440<=分辨率<1600'
}, {
value: '3',
label: '1600<=分辨率<1680'
}, {
value: '4',
label: '1680<=分辨率<1920'
}, {
value: '5',
label: '分辨率<=1920'
}],
dayOptions: [],
monthOptions: [],
hourOptions: [],
yearOptions: [], // 存储年份选项的数组
distance: 10, // 默认开始距离为100000
enddistance: 20,
selectedDate: null,
selectedHour: null, // 设置一个默认值 '00'
year: 2023,
month: 7,
day: 28,
hour: null,
hour2: null,
url: {
kgOrder: '/jeecg-customers/statistics/kgOrder/all-list',
},
map: '',
pointList: [],
popup: null,
}
},
watch: {
selectedDate: {
immediate: true,
handler(newVal) {
if (newVal) {
const date = new Date(newVal);
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
}
}
},
selectedHour: {
immediate: true,
handler(newVal) {
const momentObj = moment(newVal, "HH");
if (!isNaN(momentObj)) {
this.hour = momentObj.hours();
}
}
},
},
provide: function() {
return {
removeOlver: this.removeOlver,
addOverlay: this.addOverlay,
markers: [],
}
},
components: {
},
created() {
},
mounted() {
this.generateYearOptions();
this.initializeMap(); // 初始化地图
this.loadData(); // 加载数据
this.generateMonthOptions()
this.generateDayOptions()
this.generateHourOptions();
},
methods: {
// 截图打印功能
getSignImg() {
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
html2canvas(
document.getElementById('container'), // 要截图的容器id
{
backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
useCORS: true, //支持图片跨域
scale: this.canvaswidth, //设置放大的倍数
}
).then(canvas => {
//截图用img元素承装，显示在页面的上
let img = new Image();
img.src = canvas.toDataURL('image/jpeg'); // toDataURL :图片格式转成 base64
// document.getElementById('test').appendChild(img); // 这是看截图的页面承载，可以删掉
//如果你需要下载截图，可以使用a标签进行下载
let a = document.createElement('a');
a.href = canvas.toDataURL('image/jpeg');
a.download = 'test';
a.click();
this.$message.info('已截取屏幕')
})
},
// 选择分辨率
resolvingChange(val) {
console.log(val)
if (val == 1) {
this.canvaswidth = 1.5;
} else if (val == 2) {
this.canvaswidth = 1.4;
} else if (val == 3) {
this.canvaswidth = 1.2;
} else if (val == 4) {
this.canvaswidth = 1.1;
} else if (val == 5) {
this.canvaswidth = 1;
}
},
initializeMap() {
Vue.prototype.$map = new AMap.Map('container', {
zoom: 11,
center: [114.16129136801659, 22.64461948509109],
resizeEnable: true,
averageCenter: true,
});
this.map = Vue.prototype.$map; // 存储地图实例的引用
},
loadData() {
this.kgOrder()
.then((gpsData) => {
this.pointList = gpsData;
this.createMarkerClusterer(); // 渲染地图标记点
})
.catch((error) => {
console.error(error);
});
},
searchQuery() {
this.pointList = []; // 清空原有数据
// 移除之前的地图实例
if (this.map) {
this.map.destroy();
this.map = null;
}
// 创建新的地图实例并重新加载数据
this.initializeMap();
this.loadData();
},
searchReset() {
this.selectedDate = null;
this.selectedHour = null;
this.year = null,
this.month = null,
this.day = null,
this.hour = null,
this.distance = 10, // 默认开始距离为100000
this.enddistance = null
this.hour2 = null,
this.enddistance = 20
},
handleDateChange(value) {
const date = new Date(value);
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
},
handleHourChange(value) {
const momentObj = moment(value, "HH");
if (!isNaN(momentObj)) {
this.hour = momentObj.hours();
}
console.log(this.hour)
},
kgOrder() {
return new Promise((resolve, reject) => {
const Params = {
year: this.year,
month: this.month,
day: this.day,
hour: this.hour,
distance: this.distance,
enddistance: this.enddistance
}
console.log(Params)
// 快狗统计数据
getAction(this.url.kgOrder, Params).then((res) => {
console.log(res);
if (res.success) {
// var t = res.result;
// this.pointList = t
resolve(res.result); // 返回参数
} else {
reject(new Error('Failed to get GPS data.')); // 返回错误
this.$message.info(res.message)
}
});
});
},
/**
* 动态更改中心点位
*/
setCenter(lng, lat) {
console.log('New center:', lng, lat);
this.map.setCenter(new AMap.LngLat(lng, lat));
},
removeOlver(overlay) {
this.$nextTick(() => {
if (overlay) {
this.map.remove(overlay)
}
})
},
addOverlay(overlay) {
this.$nextTick(() => {
// console.log(this.map);
this.map && this.map.add(overlay)
})
},
delOne() {
// 删除了数组的元素，但是没用，需要调用地图的清除标记的方法
// this.arr.pop()
},
// 海量点聚合，10w数量以下
createMarkerClusterer() {
let _this = this
let markers = []
// 利用styles属性修改点聚合的图标样式,这个是聚合之后的显示效果，在这里定义
var styles = [{
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/green.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}];
_this.pointList.forEach(point => {
// 这里是点击到无法聚合，到单个点的时候展示的效果
var marker = new AMap.Marker({
position: new AMap.LngLat(point.startLng, point.startLat),
title: point.startaddress,
// content: `<div><img style="height:35px;width:30px; -moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);"src="${require("@/assets/car.png")}" alt="Car Icon" ></div><div style="width:100px;padding-left:3px;font-size:14px;margin-left:5px;height:20px;background:#fff;border:1px solid #000;text-align:canter;line-height:20px;font-size: 14px;">${ point.startaddress}</div>`,
});
//给marker增加click事件
marker.on("click", function(e) {
// Create a popup instance
var popup = new AMap.InfoWindow({
content: _this.createPopupContent(point),
offset: new AMap.Pixel(0, -30),
closeWhenClickMap: true // Close the popup when the map is clicked
});
popup.open(_this.map, marker.getPosition());
_this.popup = popup; // Store reference to the active popup window
});
markers.push(marker);
});
//添加聚合组件
_this.map.plugin(["AMap.MarkerClusterer"], function() {
new AMap.MarkerClusterer(
_this.map, // 地图实例
markers, // 海量点组成的数组
{
styles: styles,
gridSize: 80
}
);
});
},
createPopupContent(point) {
return `
<div class="popup-container">
<div class="popup-header"></div>
<div class="popup-content">
<p>${point.startaddress}</spen></p>
</div>
</div>
`;
},
// 生成年份选项数组
generateYearOptions() {
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= 1900; year--) {
this.yearOptions.push(year);
}
},
// 生成月份选项数组
generateMonthOptions() {
for (let month = 1; month <= 12; month++) {
this.monthOptions.push(month);
}
},
// 生成日选项数组
generateDayOptions() {
for (let day = 1; day <= 31; day++) {
this.dayOptions.push(day);
}
},
generateHourOptions() {
for (let hour = 0; hour <= 23; hour++) {
this.hourOptions.push(hour);
}
},
}
}
</script>
<style lang="less" scoped>
#container {
width: 100%;
height: 700px;
}
::v-deep .marker-route {
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: red;
}
.button {
color: blue;
font-size: 18px;
}
.input-container {
display: flex;
align-items: center;
margin-left: 20px;
}
.divider {
margin: 0 8px;
}
</style>
"喜欢这篇文章吗？别忘了给个点赞哦！您的支持是我创作的动力。