Vue 使用高德地圖添加點(diǎn)標(biāo)記 + 點(diǎn)擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例
更新時(shí)間：2024年01月23日 15:19:06 作者：Web - Nancy
這篇文章主要介紹了Vue 使用高德地圖添加點(diǎn)標(biāo)記 + 點(diǎn)擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
高德地圖：
與真實(shí)世界聯(lián)通 - 高德開放平臺(tái)為開發(fā)者賦能，將地圖精致地呈現(xiàn)在您的應(yīng)用中
無論基于哪種平臺(tái)，都可以通過高德開放平臺(tái)API和SDK，輕松地完成地圖的構(gòu)建工作
效果
一、介紹
1、官方文檔：地圖 | 高德地圖API
地圖 | 高德地圖API地圖，地圖sdk，地圖JS API，地圖定制，自定義地圖，地圖覆蓋物，地圖繪制，路線規(guī)劃，坐標(biāo)轉(zhuǎn)換，距離/面積計(jì)算，距離測量，室內(nèi)地圖，地圖顯示，地圖個(gè)性化，地圖開發(fā)，室內(nèi)定位
https://lbs.amap.com/product/map#/
二、準(zhǔn)備工作
1、注冊/登錄賬號(hào)
2、點(diǎn)擊控制臺(tái)
3、創(chuàng)建應(yīng)用
4、獲取key和密鑰，如上圖所示
注：使用web服務(wù)API，如下圖所示
三、安裝依賴包
1、安裝命令
npm i @amap/amap-jsapi-loader --save
2、這是我的版本
"@amap/amap-jsapi-loader": "^1.0.1",
四、使用步驟
1、在index.html文件中引入密鑰
代碼如下（示例）：
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '', // 你的密鑰
}
</script>2、在vue文件中引入依賴包
代碼如下（示例）：
import AMapLoader from "@amap/amap-jsapi-loader"
3、申明變量并初始化調(diào)用
代碼如下（示例）：
import { shallowRef, defineEmits, ref, onBeforeUnmount } from 'vue';
const map = shallowRef(null);
let AMapObj, placeSearch, marker, geocoder;
function initMap(){
AMapLoader.load({
key:'', //設(shè)置您的key
version:"2.0",
plugins:['AMap.ToolBar','AMap.Driving'],
AMapUI:{
version:"1.1",
plugins:[],
},
Loca:{
version:"2.0.0"
},
}).then((AMap)=>{
// console.log(AMap);
AMapObj = AMap;
map.value = new AMap.Map("map-box",{
viewMode:"3D",
zoom:10,
zooms:[2,22],
center: [105.602725,37.076636],
});
map.value.on('click', onMapClick);
AMap.plugin(
['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
'AMap.Geocoder','AMap.AutoComplete'],
() => {
// 縮放條
const toolbar = new AMap.ToolBar();
// 比例尺
const scale = new AMap.Scale();
// 定位
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默認(rèn):true
timeout: 10000, //超過10秒后停止定位，默認(rèn)：5s
position: 'RT', //定位按鈕的?？课恢?
buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設(shè)置的停靠位置的偏移量，默認(rèn)：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)
});
geocoder = new AMap.Geocoder({
city: '全國',
});
map.value.addControl(geolocation);
map.value.addControl(toolbar);
map.value.addControl(scale);
placeSearch = new AMap.PlaceSearch({
// map: map.value,
city: '全國',
pageSize: 10, // 單頁顯示結(jié)果條數(shù)
pageIndex: 1, // 頁碼
citylimit: false, // 是否強(qiáng)制限制在設(shè)置的城市內(nèi)搜索
autoFitView: true,
});
});
}).catch(e=>{
console.log(e);
})
}
initMap();五、完整示例
Index.html
<!DOCTYPE html>
<html lang="zh_CN" id="htmlRoot">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>
<%= title %>
</title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '', // 你的密鑰
}
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>Map.vue
<template>
<div class="home">
<div id="map-box"></div>
<div class="info-box">
<a-select
v-model:value="keyword"
show-search
placeholder="輸入關(guān)鍵字搜索"
style="width: 300px"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
@search="handleSearch"
>
<a-select-option v-for="item in data" :key="item.id" :value="item.id" @click="handleSelect(item)">
<div class="d-flex flex-column">
<span>{{item.name}}</span>
<span style="font-size: '10px'; color: #999999">{{item.address}}</span>
</div>
</a-select-option>
</a-select>
<a-tooltip>
<template #title v-if="coord">點(diǎn)擊復(fù)制</template>
<span style="margin: 5px 8px;">
經(jīng)緯度：<span class="copy" style="cursor: pointer;" :data-clipboard-text="coord">{{coord}}</span>
</span>
</a-tooltip>
</div>
</div>
</template>
<script lang="ts" setup>
import { shallowRef, ref, onBeforeUnmount } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import { message } from 'ant-design-vue';
import ClipboardJS from 'clipboard';
const clipboard = new ClipboardJS('.copy');
clipboard.on('success', function(e) {
console.log(e);
console.info('Text:', e.text);
message.info('復(fù)制成功');
e.clearSelection();
});
clipboard.on('error', function(e) {
if(!e.text) message.error('暫無可復(fù)制的內(nèi)容')
});
onBeforeUnmount(() => {
clipboard.destroy();
})
const map = shallowRef(null);
const keyword = ref(null);
const data = ref([]);
const coord = ref('');
let AMapObj, placeSearch, marker, geocoder;
function initMap(){
AMapLoader.load({
key: '', //設(shè)置您的key
version: "2.0",
plugins: ['AMap.ToolBar','AMap.Driving'],
AMapUI: {
version: "1.1",
plugins: [],
},
Loca:{
version: "2.0.0"
},
}).then((AMap)=>{
// console.log(AMap);
AMapObj = AMap;
map.value = new AMap.Map("map-box",{
viewMode:"3D",
zoom:10,
zooms:[2,22],
center: [105.602725,37.076636],
});
map.value.on('click', onMapClick);
AMap.plugin(
['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
'AMap.Geocoder','AMap.AutoComplete'],
() => {
// 縮放條
const toolbar = new AMap.ToolBar();
// 比例尺
const scale = new AMap.Scale();
// 定位
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默認(rèn):true
timeout: 10000, // 超過10秒后停止定位，默認(rèn)：5s
position: 'RT', // 定位按鈕的?？课恢?
buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設(shè)置的?？课恢玫钠屏?，默認(rèn)：Pixel(10, 20)
zoomToAccuracy: true, // 定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)
});
geocoder = new AMap.Geocoder({
city: '全國',
});
map.value.addControl(geolocation);
map.value.addControl(toolbar);
map.value.addControl(scale);
placeSearch = new AMap.PlaceSearch({
city: '全國',
pageSize: 10, // 單頁顯示結(jié)果條數(shù)
pageIndex: 1, // 頁碼
citylimit: false, // 是否強(qiáng)制限制在設(shè)置的城市內(nèi)搜索
autoFitView: true,
});
});
}).catch(e=>{
console.log(e);
})
}
// 搜索地圖
function handleSearch(str) {
placeSearch.search(str, (status, result) => {
console.log(result);
if (result && typeof result === 'object' && result.poiList) {
const list = result.poiList.pois;
list.forEach(item => {
item.value = item.name;
item.label = item.name;
});
data.value = list
}
});
}
// 點(diǎn)擊地圖
function onMapClick(e) {
coord.value = e.lnglat.lng + ',' + e.lnglat.lat
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// result為對應(yīng)的地理位置詳細(xì)信息
keyword.value = result.regeocode.formattedAddress
}
})
drawMarker(e.lnglat)
}
// 點(diǎn)擊搜索項(xiàng)
function handleSelect(item) {
console.log(item);
drawMarker(item.location)
if (item.location != null) {
coord.value = item.location.lng + ',' + item.location.lat
}
}
// 繪制地點(diǎn)marker
function drawMarker(location) {
if (location == null) return
let longitude = location.lng, latitude = location.lat
if (marker) {
marker.setMap(null);
}
marker = new AMapObj.Marker({
position: new AMapObj.LngLat(longitude, latitude),
anchor: 'bottom-center',
});
marker.on('click', () => {
coord.value = location;
})
map.value.add(marker);
map.value.setZoomAndCenter(16, [longitude, latitude]);
}
initMap();
</script>
<style lang="less" scoped>
.home{
height: 500px;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
.info-box {
position: absolute;
top: 8px;
right: 8px;
width: 300px;
background-color: #1f1f1f;
display: flex;
flex-direction: column;
}
}
#map-box{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
<style scoped>
:deep() .amap-logo {
display: none !important;
}
:deep() .amap-copyright {
display: none !important;
}
</style>注：clipboard一鍵復(fù)制的詳細(xì)使用方法參考地址
到此這篇關(guān)于Vue 使用高德地圖添加點(diǎn)標(biāo)記 + 點(diǎn)擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例的文章就介紹到這了,更多相關(guān)vue使用高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例代碼
這篇文章主要介紹了Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例,在vue3的項(xiàng)目中導(dǎo)出Excel表格的功能,可以借助xlsx庫來實(shí)現(xiàn),下面是詳細(xì)的操作步驟,需要的朋友可以參考下2025-01-01
vue 項(xiàng)目@change多個(gè)參數(shù)傳值多個(gè)事件的操作
這篇文章主要介紹了vue 項(xiàng)目@change多個(gè)參數(shù)傳值多個(gè)事件的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中，我們會(huì)遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11
Element UI是一個(gè)基于Vue 2.0的桌面端組件庫,旨在構(gòu)建簡潔、快速的用戶界面,這篇文章主要介紹了Vue如何引入ElementUI并使用,需要的朋友可以參考下2024-06-06
Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue自定義組件插入到body中的實(shí)現(xiàn)方式
文章介紹了如何在Vue中創(chuàng)建一個(gè)自定義的notice提醒組件,并將其插入到body中,該組件通過調(diào)用`show`方法顯示,調(diào)用`remove`方法銷毀,主要步驟包括創(chuàng)建組件、使用render函數(shù)加載、$mount掛載并插入到body中2025-12-12
elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡單易懂,需要的朋友可以參考下2024-02-02