vue3使用高德地圖,自定義點標記、默認點聚合樣式、點擊點標記獲取信息
更新時間：2024年01月23日 15:28:39 作者：心若向陽(*￣︶￣)
這篇文章主要介紹了vue3使用高德地圖,自定義點標記、默認點聚合樣式、點擊點標記獲取信息的相關知識,本文結合示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
vue3使用高德地圖，自定義點標記、默認點聚合樣式、點擊點標記獲取信息
1、需求：根據不用的類型和經緯度展示不同的自定義點標記，點標記太多，使用點聚合優(yōu)化，參考：見文末補充介紹。
2、在index.html使用CDN引入高德
<script type="module" charset="UTF-8" src="https://webapi.amap.com/loader.js"></script>
3、組件中獲取地圖實例
父組件:
<template>
<div class="">
<div class="">
<div class="home-map">
<div class="map-box">
<div id="map-container"></div>
</div>
<site-info />
</div>
</div>
</div>
<a-modal
title="Title"
v-model:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk"
>
<p>{{ modalText }}</p>
</a-modal>
</template>
<script setup>
import { onMounted, reactive, ref, toRaw, getCurrentInstance, watchEffect } from 'vue';
import { request } from '../../utils/request';
import { initMap, clickSite } from "../../utils/newMap";
import siteInfo from "./components/siteInfo.vue";
const globalProperties = getCurrentInstance().appContext.config.globalProperties; // 獲取全局掛載
const http = globalProperties.$http;
const toast = globalProperties.$toast;
const visible = ref(false);
const confirmLoading = ref(false);
const modalText = ref('');
const conObj = reactive({
mapObj: {},
map: {},
markers: [],
})
// 監(jiān)聽地圖站點信息變量的值
watchEffect(() => {
if(!toRaw(clickSite.siteInfo)) {
} else {
console.log(toRaw(clickSite.siteInfo));
visible.value = true;
modalText.value = `你打開了id為${toRaw(clickSite.siteInfo).id}的點標記`;
}
})
// 彈窗確定按鈕
const handleOk = () => {
confirmLoading.value = true;
setTimeout(() => {
confirmLoading.value = false;
visible.value = false;
}, 1000);
}
const getMap = async(data) => {
let map = await initMap(data)
if(map) {
conObj.map = toRaw(map).map; // 獲取地圖map實例
}
}
// 獲取地圖所有站點
const getSite = async () => {
request(http.GET_HOME_HOME_ALL_SITE, 'get', {
ownerUnit: 1
})
.then((res) => {
toast("成功獲取所有站點！");
conObj.markers = res.station;
getMap(toRaw(conObj.markers))
})
.catch(() => {
})
.finally(() => {
})
}
onMounted(async() => {
await getSite();
})
</script>
<style lang="less" scoped>
.home-map {
position: relative;
height: calc(100vh - 52px);
width: calc(100vw - 64px);
.map-box {
height: 100%;
width: 100%;
#map-container {
width: 100%;
height: 100%;
}
}
}
</style>子組件：
<template>
<div class="site-info">
<div class="site-info-title" @click="$emit('bySonVal', 4692)">
測站信息區(qū)域
</div>
</div>
</template>
<script setup>
defineEmits(['bySonVal']); // 使用defineEmits和defineProps不需要導入
</script>
<style lang="less" scoped>
.site-info {
position: absolute;
top: 0px;
left: 0px;
padding: .84rem;
background: aquamarine;
opacity: .8;
.site-info-title {
}
}
</style>4、實例化地圖
newMap.js
// 新窨井
import inspInline from "@/assets/imgs/maps/insp_inline.png";
import inspOffline from "@/assets/imgs/maps/insp_offline.png";
import inspAlarm from "@/assets/imgs/maps/insp_alarm.png";
import inspWarn from "@/assets/imgs/maps/insp_warn.png";
// 新內澇
import waterLogInline from "@/assets/imgs/maps/waterLog_inline.png";
import waterLogOffline from "@/assets/imgs/maps/waterLog_offline.png";
import waterLogAlarm from "@/assets/imgs/maps/waterLog_alarm.png";
import waterLogWarn from "@/assets/imgs/maps/waterLog_warn.png";
// 新管網
import networkInline from "@/assets/imgs/maps/network_inline.png";
import networkOffline from "@/assets/imgs/maps/network_offline.png";
import networkAlarm from "@/assets/imgs/maps/network_alarm.png";
import networkWarn from "@/assets/imgs/maps/network_warn.png";
// 新閘門
import gateInline from "@/assets/imgs/maps/gate_inline.png";
import gateOffline from "@/assets/imgs/maps/gate_offline.png";
import gateAlarm from "@/assets/imgs/maps/gate_alarm.png";
import gateWarn from "@/assets/imgs/maps/gate_warn.png";
// 新泵站
import pumpInline from "@/assets/imgs/maps/pump_inline.png";
import pumpOffline from "@/assets/imgs/maps/pump_offline.png";
import pumpAlarm from "@/assets/imgs/maps/pump_alarm.png";
import pumpWarn from "@/assets/imgs/maps/pump_warn.png";
// 新河道水體水位
import waterInline from "@/assets/imgs/maps/water_inline.png";
import waterOffline from "@/assets/imgs/maps/water_offline.png";
import waterAlarm from "@/assets/imgs/maps/water_alarm.png";
import waterWarn from "@/assets/imgs/maps/water_warn.png";
// 新視頻站
import videoInline from "@/assets/imgs/maps/video_inline.png";
import videoOffline from "@/assets/imgs/maps/video_offline.png";
import videoAlarm from "@/assets/imgs/maps/video_alarm.png";
import videoWarn from "@/assets/imgs/maps/video_warn.png";
import {
reactive
} from 'vue';
import {
wgs_gcj_encrypts
} from "./transformLonLat"
window._AMapSecurityConfig = {
securityJsCode: '39800a1cd4581dbcc97dcfac34bc074e', // 安全秘鑰
}
let obj = reactive({
cluster: undefined
})
// 獲取地圖上站點的信息
export let clickSite = reactive({
siteInfo: null
})
// 地圖初始化
export const initMap = (markersList) => AMapLoader.load({
"key": "32bc822dd7ff40652fc9fd78c546729a", // 申請好的Web端開發(fā)者Key，首次調用 load 時必填
"version": "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
"plugins": ["AMap.Pixel", "AMap.MarkerClusterer", "AMap.ToolBar"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
const map = new AMap.Map("map-container", {
resizeEnable: true,
viewMode: '3D',
});
// 添加縮放
map.addControl(new AMap.ToolBar());
// 點聚合數據
var markers = [];
for (let i = 0; i < markersList.length; i++) {
// 標準轉高德
let oldLat, oldLon
// 防止有多個點而返回了NAN
if (wgs_gcj_encrypts(markersList[i].latitude, markersList[i].longitude).lat && (wgs_gcj_encrypts(markersList[i].latitude, markersList[i].longitude).lat).length >= 9) {
oldLat = (wgs_gcj_encrypts(markersList[i].latitude, markersList[i].longitude).lat).substr(0, 9);
} else {
oldLat = "0"
}
if (wgs_gcj_encrypts(markersList[i].latitude, markersList[i].longitude).lon && (wgs_gcj_encrypts(markersList[i].latitude, markersList[i].longitude).lon).length >= 10) {
oldLon = (wgs_gcj_encrypts(markersList[i].latitude, markersList[i].longitude).lon).substr(0, 10);
} else {
oldLon = "0"
}
// 判斷最后一位是否為 "."
if (oldLat.length && (oldLat.charAt(oldLat.length - 1) == ".")) {
oldLat = oldLat.substr(0, oldLat.length - 1)
}
if (oldLon.length && (oldLon.charAt(oldLon.length - 1) == ".")) {
oldLon = oldLon.substr(0, oldLon.length - 1)
}
let lat = parseFloat(oldLat)
let lon = parseFloat(oldLon)
markers.push({
lnglat: [lon, lat], // 必傳參數，統(tǒng)一格式
code: markersList[i].hexCode,
id: markersList[i].id,
status: markersList[i].status
})
}
// 自定義點標記
var _renderMarker = function (context) {
var icon
// 根據hexCode與status判斷賦值點標記圖標
let code = context.data[0].code;
let status = context.data[0].status;
if (code == '62H' && status == 1) {
icon = inspInline
} else if (code == '62H' && status == 2) {
icon = inspWarn
} else if (code == '62H' && status == 3) {
icon = inspOffline
} else if (code == '62H' && status == 4) {
icon = inspAlarm
} else if (code == '60H' && status == 1) {
icon = waterLogInline
} else if (code == '60H' && status == 2) {
icon = waterLogWarn
} else if (code == '60H' && status == 3) {
icon = waterLogOffline
} else if (code == '60H' && status == 4) {
icon = waterLogAlarm
} else if (code == '61H' && status == 1) {
icon = networkInline
} else if (code == '61H' && status == 2) {
icon = networkWarn
} else if (code == '61H' && status == 3) {
icon = networkOffline
} else if (code == '61H' && status == 4) {
icon = networkAlarm
} else if (code == '5AH' && status == 1) {
icon = gateInline
} else if (code == '5AH' && status == 2) {
icon = gateWarn
} else if (code == '5AH' && status == 3) {
icon = gateOffline
} else if (code == '5AH' && status == 4) {
icon = gateAlarm
} else if (code == '44H' && status == 1) {
icon = pumpInline
} else if (code == '44H' && status == 2) {
icon = pumpWarn
} else if (code == '44H' && status == 3) {
icon = pumpOffline
} else if (code == '44H' && status == 4) {
icon = pumpAlarm
} else if (code == '48H' && status == 1) {
icon = waterInline
} else if (code == '48H' && status == 2) {
icon = waterWarn
} else if (code == '48H' && status == 3) {
icon = waterOffline
} else if (code == '48H' && status == 4) {
icon = waterAlarm
} else if (code == '70H' && status == 1) {
icon = videoInline
} else if (code == '70H' && status == 2) {
icon = videoWarn
} else if (code == '70H' && status == 3) {
icon = videoOffline
} else if (code == '70H' && status == 4) {
icon = videoAlarm
}
// 點標記樣式
var content = `<div style="height: 30px; width: 30px;"><img style="width: 100%; height: 100%" src="${icon}"></img></div>`;
var offset = new AMap.Pixel(-9, -9);
context.marker.setContent(content);
context.marker.setOffset(offset);
// 設置標記攜帶的數據，點擊事件會使用
context.marker.setExtData({
id: context.data[0].id,
hexCode: context.data[0].code
});
// 單個標記點擊事件
context.marker.on('click', ev => {
// 當前標記居中, 第一個參數為縮放級別
map.setZoomAndCenter(18, ev.target.getPosition());
// 獲取標記攜帶的數據
const extData = ev.target.getExtData();
clickSite.siteInfo = extData; // 點擊獲取當前站點的信息，觸發(fā)監(jiān)聽事件
});
}
if (markers && markers.length) {
obj.cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80,
clusterByZoomChange: true,
renderMarker: _renderMarker
});
// 點擊點聚合
obj.cluster.on('click', (item) => {
//此處是通過包含點的數量判斷是否是聚合點，不是聚合點就執(zhí)行上方單個點的點擊方式
if (item.clusterData.length <= 1) {
return;
}
//這里是計算所有聚合點的中心點
let alllng = 0,
alllat = 0;
for (const mo of item.clusterData) {
alllng += mo.lnglat.lng;
alllat += mo.lnglat.lat;
}
const lat = alllat / item.clusterData.length;
const lng = alllng / item.clusterData.length;
//這里是放大地圖，此處寫死了每次點擊放大的級別，可以根據點的數量和當前大小適應放大，體驗更佳
map.setZoomAndCenter(map.getZoom() + 2, [lng, lat]);
});
}
return {
AMap,
map
}
}).catch(e => {
console.log(e);
})5、國標轉高德
transformLonLat.js:
//轉換常數
var pi = 3.14159265358979324;
var a = 6378245.0;
var ee = 0.00669342162296594323;
function transformLon(x, y) {
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
return ret;
};
function transformLat(x, y) {
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
return ret;
}
function outOfChina(lat, lon) {
if (lon < 72.004 || lon > 137.8347)
return true;
if (lat < 0.8293 || lat > 55.8271)
return true;
return false;
}
/*
* WGS-84：是國際標準，GPS坐標（Google Earth使用、或者GPS模塊、天地圖）
* GCJ-02：中國坐標偏移標準，Google Map、高德、騰訊使用
* BD-09：百度坐標偏移標準，Baidu Map使用
*/
/**
* wgLat 緯度
* wgLon 經度
* WGS-84 到 GCJ-02 的轉換（即 GPS 加偏）
* */
export const wgs_gcj_encrypts = (wgLat, wgLon) => {
var point = {};
if (outOfChina(wgLat, wgLon)) {
point.lat = wgLat;
point.lon = wgLon;
return point;
}
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
var radLat = wgLat / 180.0 * pi;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
var lat = wgLat + dLat;
var lon = wgLon + dLon;
point.lat = lat;
point.lon = lon;
return point;
};6、完成，效果：
補充：
高德地圖js2.0使用MarkerCluster聚合點及添加點擊事件
之前的博客中我便提過了在版本變化的趨勢下，高德地圖也在不斷迭代，目前2.0以下版本已經在iOS15 beta版本不適用了，而且2.0以下版本由于卡頓等問題也不在符合用戶的使用需要，升級迫在眉睫，但2.0對于標記的聚和與之前版本有較大區(qū)別，在此將寫法記錄一下，也希望能幫到大家。
2.0以前對于標記的處理是將標記全部在地圖上畫出來之后通過MarkerClusterer聚合，不僅對標記的修改較為復雜，還會導致嚴重的卡頓問題。而在升級到2.0后，標記的聚合便是通過MarkerCluster將標記的坐標打在地圖上，然后直接渲染的方式了，如下所示：
this.cluster = new AMap.MarkerCluster(this.map, this.allLnglat, {
styles: styles,
renderMarker: this.renderMarker
});其中只列舉出了最重要的幾個參數：
this.map:當前渲染的地圖
this.allLnglat:所有的標記坐標，例如：[{ lnglat: [117.366,36.577] }]
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)
}]renderMarker：非聚合點上顯示的標記，也就是單個點顯示的標記，和2.0版本前我們定義的marker是一個東西，可以自定義樣式添加點擊事件等，例如：
renderMarker(context) {
//顯示點的經緯度context.data[0].lnglat
//此處應有邏輯，通過遍歷所有點的經緯度來識別當前標記對應的數據
//此處content為設置當個標記的樣式
context.marker.setContent(content);
//此處為設置標記在地圖上的偏移，根據標記物大小處理
context.marker.setOffset(new AMap.Pixel(-20, -20));
//此處為設置標記是否顯示在最上方，一般只有選中的標記在最上方
context.marker.setTop(top);
//此處為設置標記攜帶的數據，點擊事件會使用
context.marker.setExtData({
id: id
});
//此處為添加單個標記點擊事件
context.marker.on('click', ev => {
//當前標記居中
this.map.setZoomAndCenter(16, ev.target.getPosition());
//獲取標記攜帶的數據
const extData = ev.target.getExtData();
const id = extData.id;
});
},由于現(xiàn)在聚合點和標記點都是使用的標記，因此聚合點沒有提供點擊散開的功能，我們可以通過一下方式實現(xiàn)：
this.cluster.on('click', (item) => {
//此處是通過包含點的數量判斷是否是聚合點，不是聚合點就執(zhí)行上方單個點的點擊方式
if(item.clusterData.length <= 1) {
return;
}
//這里是計算所有聚合點的中心點
let alllng = 0, alllat = 0;
for(const mo of item.clusterData) {
alllng += mo.lnglat.lng;
alllat += mo.lnglat.lat;
}
const lat = alllat / item.clusterData.length;
const lng = alllng / item.clusterData.length;
//這里是放大地圖，此處寫死了每次點擊放大的級別，可以根據點的數量和當前大小適應放大，體驗更佳
this.map.setZoomAndCenter(this.map.getZoom() + 2, [lng, lat]);
});renderMarker方法是通過地圖縮放實時變化持續(xù)調用的，所以我們可以直接修改數據的方式實時修改點上的數據，注意修改完成后縮放一下地圖，之后可以也通過this.cluster.setData方法修改要顯示在地圖上的點
注意：這種寫法有個明顯的問題，如果出現(xiàn)兩個坐標完全相同的點，前一個坐標會被后一個頂掉，如果不能保證坐標完全不同的話，建議對坐標進行去重處理或是修改重復坐標，另外，由于float浮點數加減問題及context.data[0].lnglat方法會去除一部分小數，建議判斷時統(tǒng)一所有數據小數精度。
到此這篇關于vue3使用高德地圖，自定義點標記、默認點聚合樣式、點擊點標記獲取信息的文章就介紹到這了,更多相關vue3高德地圖點標記獲取信息內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負責構建用戶界面和處理數據邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10
Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要為大家詳細介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數據的流程,需要的可以參考下2023-12-12
這篇文章主要介紹了關于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue中常遇到第三方js,這篇文章主要給大家介紹了關于Vue項目中如何引入本地第三方JS庫的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
vue前端頁面數據加載添加loading效果的實現(xiàn)
這篇文章主要介紹了vue前端頁面數據加載添加loading效果的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在項目中很多時候需要用到vue打包成html不需要放在服務器上就能瀏覽,根據官網打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關于vue打包后出現(xiàn)空白頁的原因及解決方式的相關資料,需要的朋友可以參考下2022-07-07