如何在 vue3 中使用高德地圖
更新時間：2024年08月14日 12:13:09 作者：yqcoder
這篇文章主要介紹了如何在 vue3 中使用高德地圖,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
前言：定位地圖位置所需要的經(jīng)緯度，可以通過 拾取坐標 獲取。
一：快速上手
1. 安裝依賴
npm install @amap/amap-jsapi-loader # or pnpm add @amap/amap-jsapi-loader # or yarn add @amap/amap-jsapi-loader
2. 創(chuàng)建組件 src/components/Map.vue
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
onMounted(() => {
AMapLoader.load({
key: "", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
map = new AMap.Map("container", {
// 設(shè)置地圖容器id
viewMode: "3D", // 是否為3D地圖模式
zoom: 11, // 初始化地圖級別
center: [116.397428, 39.90923], // 初始化地圖中心點位置
});
})
.catch((e) => {
console.log(e);
});
});
onUnmounted(() => {
map?.destroy();
});
</script>
<template>
<div id="container"></div>
</template>
<style scoped>
#container {
width: 100%;
height: 800px;
}
</style>3. 獲取 key 值
注冊高德賬號，注冊成功后登錄，然后 添加 key 值。復(fù)制添加后的 Key 值到組件，就可以使用了。
二：地圖配置
參考文檔 地圖 JS API
1. 展示地圖
1.1. 加載 JS API
AMapLoader.load({
key: "「你申請的應(yīng)用key」", //申請好的Web端開發(fā)者key，調(diào)用 load 時必填
version: "2.0", //指定要加載的 JS API 的版本，缺省時默認為 1.4.15
})
.then((AMap) => {
//JS API 加載完成后獲取AMap對象
})
.catch((e) => {
console.error(e); //加載錯誤提示
});1.2. 地圖初始化
const map = new AMap.Map("container", {
viewMode: "2D", //默認使用 2D 模式
zoom: 11, //地圖級別
center: [116.397428, 39.90923], //地圖中心點
});1.3. 主題樣式
通過在地圖初始化時設(shè)置 mapStyle 修改主題樣式，官方主題有 amap://styles/ 后面拼接：normal、grey、whitesmoke、dark、light、graffiti
map = new AMap.Map("container", {
mapStyle: "amap://styles/whitesmoke", //設(shè)置地圖的顯示樣式
});2. 展示圖層
2.1 創(chuàng)建圖層
const layer = new AMap.createDefaultLayer({
zooms: [3, 20], //可見級別
visible: true, //是否可見
opacity: 1, //透明度
zIndex: 0, //疊加層級
});2.2 加載圖層
const map = new AMap.Map("container", {
viewMode: "2D", //默認使用 2D 模式
zoom: 11, //地圖級別
center: [116.397428, 39.90923], //地圖中心點
layers: [layer], //layer為創(chuàng)建的默認圖層
});2.3 創(chuàng)建實時交通路況圖層
const traffic = new AMap.TileLayer.Traffic({
autoRefresh: true, //是否自動刷新，默認為false
interval: 180, //刷新間隔，默認180s
});
map.add(traffic); //通過add方法添加圖層2.4 路況圖層的顯示和隱藏
traffic.show(); //顯示路況圖層 traffic.hide(); //隱藏路況圖層
3. 添加地圖控件
JS API 提供了眾多的控件，需要引入之后才能使用這些控件的功能。常見的地圖控件有：縮放工具條 ToolBar、比例尺 Scale、定位按鈕 Geolocation 等。
3.1 引入地圖控件
//異步加載控件
AMap.plugin("AMap.ToolBar", function () {
var toolbar = new AMap.ToolBar(); //縮放工具條實例化
map.addControl(toolbar);
});3.2 控制地圖控件顯示/隱藏
toolbar.show(); //縮放工具展示 toolbar.hide(); //縮放工具隱藏
4. 添加點標記
點標記是地圖覆蓋物中非常重要的要素之一，可以用來標記地圖上的某個位置。
4.1 自定義 Marker
自定義 Marker 內(nèi)容可以是字符串拼接的 DOM 元素?？梢愿鶕?jù) class 名去定義樣式。
//點標記顯示內(nèi)容 const markerContent = `<div class="custom-content-marker"> <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"> <div class="close-btn" onclick="clearMarker()">X</div> </div>`;
4.2 創(chuàng)建 Marker 對象
const position = new AMap.LngLat(116.397428, 39.90923); //Marker 經(jīng)緯度
const marker = new AMap.Marker({
position: position,
content: markerContent, //將 html 傳給 content
offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 為原點
});4.3 將 Marker 添加到地圖
map.add(marker);
4.4 給 Marker 綁定事件
function clearMarker() {
map.remove(marker); //清除 marker
}
document.querySelector(".close-btn").onclick = clearMarker; //綁定點擊事件
5. 添加多邊形
多邊形矢量圖是地圖覆蓋物重要的地圖要素之一，可以用來突出標記某個區(qū)域的形狀。
5.1 創(chuàng)建地圖
const map = new AMap.Map("container", {
center: [121.045332, 31.19884], //地圖中心點
zoom: 8.8, //地圖級別
});5.2 創(chuàng)建 Polygon 對象
AMap.Polygon 對象為用戶提供在地圖圖面繪制多邊形的能力?？梢詾槎噙呅卧O(shè)置填充顏色 fillColor、描邊顏色 strokeColor、輪廓線樣式等屬性。
tips: path 是多邊形輪廓線的節(jié)點坐標數(shù)組。多邊形支持普通多邊形，帶單個孔多邊形，帶多個孔多邊形類型繪制。
普通多邊形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]]
帶單個孔多邊形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]]
帶多個孔多邊形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...]
const pathArr = [
[
[
[121.7789, 31.3102],
[121.7279, 31.3548],
[121.5723, 31.4361],
[121.5093, 31.4898],
[121.5624, 31.4864],
[121.5856, 31.4547],
[121.7694, 31.3907],
[121.796, 31.3456],
[121.7789, 31.3102],
],
],
];
const polygon = new AMap.Polygon({
path: pathArr, //多邊形路徑
fillColor: "#ccebc5", //多邊形填充顏色
strokeOpacity: 1, //線條透明度
fillOpacity: 0.5, //填充透明度
strokeColor: "#2b8cbe", //線條顏色
strokeWeight: 1, //線條寬度
strokeStyle: "dashed", //線樣式
strokeDasharray: [5, 5], //輪廓的虛線和間隙的樣式
});5.3 給 Polygon 添加事件
//鼠標移入更改樣式
polygon.on("mouseover", () => {
polygon.setOptions({
fillOpacity: 0.7, //多邊形填充透明度
fillColor: "#7bccc4",
});
});
//鼠標移出恢復(fù)樣式
polygon.on("mouseout", () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: "#ccebc5",
});
});5.4 添加 Polygon 到地圖
map.add(polygon);
6. 搜索地點
AMap.PlaceSearch 地點搜索插件。
6.1 創(chuàng)建地圖
const map = new AMap.Map("container", {
viewMode: "2D", //默認使用 2D 模式
zoom: 11, //地圖級別
center: [116.397428, 39.90923], //地圖中心點
});6.2 引入插件
通過 AMap.plugin 方法按需引入插件
AMap.plugin(["AMap.PlaceSearch"], function () {
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, //單頁顯示結(jié)果條數(shù)
pageIndex: 1, //頁碼
city: "010", //興趣點城市
citylimit: true, //是否強制限制在設(shè)置的城市內(nèi)搜索
map: map, //展現(xiàn)結(jié)果的地圖實例
panel: "my-panel", //結(jié)果列表將在此容器中進行展示。
autoFitView: true, //是否自動調(diào)整地圖視野使繪制的 Marker 點都處于視口的可見范圍
});
placeSearch.search("北京大學(xué)"); //使用插件搜索關(guān)鍵字并查看結(jié)果
});6.3 自定義搜索結(jié)果
如果不想使用 JS API 的結(jié)果面板，panel 可以缺省或者賦值 false，然后在 search()的回調(diào)中處理自己的邏輯，自定義搜索教程前往 輸入提示與 POI 搜索。
//在回調(diào)函數(shù)中使用插件功能
placeSearch.search("北京大學(xué)", function (status, result) {
//查詢成功時，result 即對應(yīng)匹配的 POI 信息
});
7. 路線規(guī)劃
AMap.Driving 駕車路線規(guī)劃插件。JS API 的路線規(guī)劃種類有：駕車 AMap.Driving、公交 AMap.Transfer、步行 AMap.Walking、騎乘 AMap.Riding 和貨車 AMap.TruckDriving 等。
7.1 確認規(guī)劃的起點和終點信息
// 使用地名確認起終點
const points = [
{ keyword: "北京市地震局（公交站）", city: "北京" }, //起始點坐標
{ keyword: "亦莊文化園（地鐵站）", city: "北京" }, //終點坐標
];
// 使用經(jīng)緯度確認起終點
const startLngLat = [116.379028, 39.865042]; //起始點坐標
const endLngLat = [116.427281, 39.903719]; //終點坐標7.2 引入和創(chuàng)建駕車規(guī)劃插件，獲取起終點規(guī)劃線路
// 使用地點名稱規(guī)劃獲取規(guī)劃路線
// 引入和創(chuàng)建駕車規(guī)劃插件
AMap.plugin(["AMap.Driving"], function () {
const driving = new AMap.Driving({
map: map,
panel: "my-panel",
});
//獲取起終點規(guī)劃線路
driving.search(points, function (status, result) {
if (status === "complete") {
//status：complete 表示查詢成功，no_data 為查詢無結(jié)果，error 代表查詢錯誤
//查詢成功時，result 即為對應(yīng)的駕車導(dǎo)航信息
console.log(result);
} else {
console.log("獲取駕車數(shù)據(jù)失?。? + result);
}
});
});
// 使用經(jīng)緯度規(guī)劃獲取規(guī)劃路線
// 引入和創(chuàng)建駕車規(guī)劃插件
AMap.plugin(["AMap.Driving"], function () {
const driving = new AMap.Driving({
map: map,
panel: "my-panel",
});
//獲取起終點規(guī)劃線路
driving.search(startLngLat, endLngLat, function (status, result) {
if (status === "complete") {
//status：complete 表示查詢成功，no_data 為查詢無結(jié)果，error 代表查詢錯誤
//查詢成功時，result 即為對應(yīng)的駕車導(dǎo)航信息
console.log(result);
} else {
console.log("獲取駕車數(shù)據(jù)失?。? + result);
}
});
});
8. 地圖生命周期
8.1 創(chuàng)建地圖
var map = new AMap.Map("container", {
zoom: 10, //地圖級別
center: [116.397428, 39.90923], //地圖中心點
layers: [new AMap.TileLayer.Satellite()], //設(shè)置圖層,可設(shè)置成包含一個或多個圖層的數(shù)組
mapStyle: "amap://styles/whitesmoke", //設(shè)置地圖的顯示樣式
viewMode: "2D", //設(shè)置地圖模式
});8.2 地圖加載完成
map.on("complete", function () {
//地圖圖塊加載完成后觸發(fā)
});8.3 地圖運行階段
var map = new AMap.Map("container"); //初始化地圖
//在運行階段添加點標記
const marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9),
});
//將創(chuàng)建的點標記添加到已有的地圖實例：
map.add(marker);
//在運行階段監(jiān)聽地圖的點擊事件
const clickHandler = function (e) {
console.log(
"您在[ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ]的位置點擊了地圖！"
);
};
map.on("click", clickHandler);8.4 銷毀地圖對象
//解綁地圖的點擊事件
map.off("click", clickHandler);
//銷毀地圖，并清空地圖容器
map.destroy();
//地圖對象賦值為null
map = null;
//清除地圖容器的 DOM 元素
document.getElementById("container").remove(); //"container" 為指定 DOM 元素的id到此這篇關(guān)于在 vue3 中使用高德地圖的文章就介紹到這了,更多相關(guān)vue3 使用高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)飛機大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了詳解vue通過NGINX部署在子目錄或者二級目錄實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Web應(yīng)用程序中資源分頁不僅對性能很有幫助，而且從用戶體驗的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動態(tài)和可用的分頁組件2022-12-12
這篇文章主要介紹了Vue中封裝eCharts組件及優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
解決antd Form 表單校驗方法無響應(yīng)的問題
這篇文章主要介紹了解決antd Form 表單校驗方法無響應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜的實現(xiàn)
本文主要介紹了vue使用GraphVis開發(fā)無限拓展的關(guān)系圖譜，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家介紹了封裝一個更易用的Dialog組件過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05