vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情(完整實(shí)例)
更新時間：2023年07月07日 09:58:10 作者：不等天亮等時光
這篇文章主要介紹了vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
PC端高德地圖使用步驟：
1、注冊并登錄高德開放平臺獲取
2、安裝高德依賴（amap-jsapi-loader）
3、初始化地圖
4、首次打開地圖獲取當(dāng)前定位并標(biāo)記
5、根據(jù)已有地址自動定位到指定地址并標(biāo)記
6、新增、清除標(biāo)記及自定義信息窗體
7、鼠標(biāo)點(diǎn)擊地圖并選點(diǎn)標(biāo)記
8、根據(jù)關(guān)鍵字搜索并自動定位
9、效果圖
10、完整代碼
高德官方api：高德官方開放平臺
一、注冊并登錄高德開放平臺獲取（key和秘鑰）
引用：
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: '**************************',//你的秘鑰
}
</script>二、安裝高德依賴
npm i @amap/amap-jsapi-loader --save
三、初始化地圖
封裝公共的地圖組件：
<map-container :positionInfo ='positionInfo' @select ='getLocationInfo'></map-container>
mounted() {
this.initMap()
},
methods:{
initMap(){
AMapLoader.load({
key:"**********************", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [ //需要使用的插件
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.Geocoder',
'AMap.CitySearch'
],
resizeEnable: true,
}).then((AMap)=>{
const that = this;
that.map = new AMap.Map("container",{ //設(shè)置地圖容器id
viewMode:"3D", //是否為3D地圖模式
zoom:12, //初始化地圖級別
});
}).catch(e=>{
console.log(e);
})
},四、首次打開地圖獲取當(dāng)前定位并標(biāo)記
initMap(){
AMapLoader.load({
key:"*******************", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.Geocoder',
'AMap.CitySearch'
],
resizeEnable: true,
}).then((AMap)=>{
const that = this;
that.map = new AMap.Map("container",{ //設(shè)置地圖容器id
viewMode:"3D", //是否為3D地圖模式
zoom:12, //初始化地圖級別
});
that.getCurrentLocation();//獲取當(dāng)前定位
that.geocoder = new AMap.Geocoder()
that.map.addControl(new AMap.Scale()) // 在圖面添加比例尺控件，展示地圖在當(dāng)前層級和緯度下的比例尺
that.map.addControl(new AMap.ToolBar()) //在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
}).catch(e=>{
console.log(e);
})
},
//獲取當(dāng)前定位
getCurrentLocation(){
const that = this;
that.geolocation = new AMap.Geolocation({
timeout: 3000, //超過3秒后停止定位，默認(rèn)：5s
enableHighAccuracy: true,
zoomToAccuracy: true, //定位成功后是否自動調(diào)整地圖視野到定位點(diǎn)
});
that.geolocation.getCurrentPosition(function(status,result){
//備注：getCurrentPosition方法會調(diào)用超時或失?。?
//Get geolocation time out：瀏覽器定位超時，包括原生的超時，可以適當(dāng)增加超時屬性的設(shè)定值以減少這一現(xiàn)象。
//另外還有個別瀏覽器（如google Chrome瀏覽器等）本身的定位接口是黑洞，通過其請求定位完全沒有回應(yīng)，也會超時返回失敗。
//Get geolocation failed：定位失敗，Chrome、火狐以及部分套殼瀏覽器接入的定位服務(wù)在國外，有較大限制，失敗率高。
console.log(status,result);
if(status=='complete'){
that.onComplete(result)
}else{
that.onError(result) //失敗后可使用getCityInfo獲取非精準(zhǔn)定位（具體到省市）
}
});
},
//解析定位結(jié)果
onComplete(data) {
console.log('定位結(jié)果：' + data.position) //經(jīng)緯度信息
let lnglat = data.position;
let marker = new AMap.Marker({ //創(chuàng)建標(biāo)記
position: new AMap.LngLat(lnglat[0], lnglat[1])
})
this.map.clearMap()// 清除所有覆蓋物（點(diǎn)標(biāo)志）
this.map.add(marker)// 添加點(diǎn)標(biāo)志
let that = this
//經(jīng)緯度轉(zhuǎn)換為中文地址詳情
that.geocoder.getAddress(lnglat, function (status, result) {
if (status === 'complete' && result.regeocode) {
that.address = result.regeocode.formattedAddress;
that.showInfoWindow(marker);//自定義信息窗體
} else {
that.$message.error('根據(jù)經(jīng)緯度查詢地址失敗')
}
})
},
//解析定位錯誤信息
onError(data) {
this.getLngLatLocation()
},
//在獲取具體定位失敗時調(diào)用的代碼：（非精準(zhǔn)定位！?。。?
getLngLatLocation() {
const that = this;
that.geolocation.getCityInfo(function (status, result) {
if (status === 'complete') {
let data = result.position
that.address = result.province + result.city;
that.showLocation(data)
} else {
that.$message.error('獲取地址失敗')
}
})
},五、根據(jù)已有地址自動定位到指定地址并標(biāo)記
initMap(){
AMapLoader.load({
key:"*******************", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.Geocoder',
'AMap.CitySearch'
],
resizeEnable: true,
}).then((AMap)=>{
const that = this;
that.map = new AMap.Map("container",{ //設(shè)置地圖容器id
viewMode:"3D", //是否為3D地圖模式
zoom:15, //初始化地圖級別
center：[that.positionInfo.lng,that.positionInfo.lat]; // 首次加載地圖自動加載到指定位置中心
});
that.showLocation(data) //新增標(biāo)記并展示信息窗體
that.map.addControl(new AMap.Scale()) // 在圖面添加比例尺控件，展示地圖在當(dāng)前層級和緯度下的比例尺
that.map.addControl(new AMap.ToolBar()) //在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
}).catch(e=>{
console.log(e);
})
},六、新增、清除標(biāo)記及自定義信息窗體
//新增標(biāo)記
showLocation(data){
let marker = new AMap.Marker({
position: new AMap.LngLat( data[0],data[1]) //參數(shù)為經(jīng)緯度
})
this.map.clearMap()// 清除所有覆蓋物（點(diǎn)標(biāo)志）
this.map.add(marker)// 添加點(diǎn)標(biāo)志
this.showInfoWindow(marker);//自定義信息窗體
},
//自定義信息窗體
showInfoWindow(marker){
let infoWindow = new AMap.InfoWindow({
isCustom: true, //是否自定義信息窗體
content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.address}</div>`,
closeWhenClickMap: true,
zIndex: 999,
offset: new AMap.Pixel(16, -35)
});
infoWindow.open(this.map, marker.getPosition());
},七、鼠標(biāo)點(diǎn)擊地圖并選點(diǎn)標(biāo)記
initMap(){
AMapLoader.load({
key:"*******************", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.Geocoder',
'AMap.CitySearch'
],
resizeEnable: true,
}).then((AMap)=>{
const that = this;
that.map = new AMap.Map("container",{ //設(shè)置地圖容器id
viewMode:"3D", //是否為3D地圖模式
zoom:12, //初始化地圖級別
});
that.geocoder = new AMap.Geocoder()
that.map.addControl(new AMap.Scale()) // 在圖面添加比例尺控件，展示地圖在當(dāng)前層級和緯度下的比例尺
that.map.addControl(new AMap.ToolBar()) //在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
that.handleClick(AMap)//地圖選點(diǎn)
}).catch(e=>{
console.log(e);
})
},
//點(diǎn)擊地圖獲取地理位置
handleClick(){
this.map.on('click', (e) => {
let lng = e.lnglat.lng
let lat = e.lnglat.lat
let marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat)
})
this.map.clearMap()// 清除所有覆蓋物（點(diǎn)標(biāo)志）
this.map.add(marker)// 添加點(diǎn)標(biāo)志
let lnglat = [lng, lat]
let that = this
that.geocoder.getAddress(lnglat, function (status, result) {
if (status === 'complete' && result.regeocode) {
that.address = result.regeocode.formattedAddress;
that.showInfoWindow(marker);//自定義信息窗體
let thisPosition = {
address: that.address,
lng: lng,
lat: lat
};
that.$emit("select",thisPosition) //返回給父組件
} else {
that.$message.error('根據(jù)經(jīng)緯度查詢地址失敗')
}
})
})
},八、根據(jù)關(guān)鍵字搜索并自動定位
//搜索框及搜索結(jié)果選擇窗
<template>
<div>
//搜索框
<div class="map-box">
<div class="label">關(guān)鍵字搜索</div>
<el-input
v-model="mapAddress"
placeholder="請輸入內(nèi)容"
id="tipinput"
@keyup.enter.native="searchKeyWord"
>
</el-input>
<el-button type="primary" @click="searchKeyWord" icon="el-icon-search" ></el-button>
</div>
//搜索結(jié)果選擇窗
<div class="map_search_result" v-if="showSearchResult">
<ul>
<li @click="markerResult(item)" v-for="(item,index) in poiList" :key="index">{{item.name}}</li>
</ul>
</div>
//地圖
<div id="container" :style="{width: width, height: height}"></div>
</div>
</template>initMap(){
AMapLoader.load({
key:"*******************", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [
'AMap.ToolBar',
'AMap.Scale',
'AMap.Geolocation',
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.Geocoder',
'AMap.CitySearch'
],
resizeEnable: true,
}).then((AMap)=>{
const that = this;
that.map = new AMap.Map("container",{ //設(shè)置地圖容器id
viewMode:"3D", //是否為3D地圖模式
zoom:12, //初始化地圖級別
});
that.handleClick(AMap)//地圖選點(diǎn)
that.map.addControl(new AMap.Scale()) // 在圖面添加比例尺控件，展示地圖在當(dāng)前層級和緯度下的比例尺
that.map.addControl(new AMap.ToolBar()) //在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖
that.geocoder = new AMap.Geocoder()
that.mapSearchInit()
}).catch(e=>{
console.log(e);
})
}, /** 初始化搜索 */
mapSearchInit(){
let autoOptions = {
input: "tipInput",
}
let autoCompleteComponent= new AMap.Autocomplete(autoOptions);
this.autoCompleteComponent = autoCompleteComponent;
// 注冊placeSearch組件
this.placeSearchComponent = new AMap.PlaceSearch()
},
//根據(jù)輸入內(nèi)容查詢
searchKeyWord(){
let that= this
that.placeSearchComponent.search(that.mapAddress, function (status, result) {
if(status==='complete' && result.info === "OK"){
that.showsearchResult = true
that.poiList = result.poiList.pois
}else{
that.showsearchResult = false
that.poiList = []
that.$message({
message: "沒有查到結(jié)果",
type: "warning",
});
}
})
},
//選擇搜索的內(nèi)容
markerResult(data){
this.showsearchResult = false;
this.address = data.name;
var marker = new AMap.Marker({
position: [Number(data.location.lng),Number(data.location.lat)],
});
this.map.clearMap()// 清除所有覆蓋物（點(diǎn)標(biāo)志）
this.map.add(marker)// 添加點(diǎn)標(biāo)志
this.showInfoWindow(marker);
setTimeout(() => {
this.map.setCenter(data.location);
this.map.setZoom(15);
}, 50)
let thisPosition = {
address: this.address,
lng: data.location.lng,
lat: data.location.lat
};
this.$emit("select",thisPosition)
},九、效果圖
到此這篇關(guān)于vue中PC端使用高德地圖 -- 實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情的文章就介紹到這了,更多相關(guān)vue高德地圖搜索定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue element upload實(shí)現(xiàn)圖片本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了vue element upload實(shí)現(xiàn)圖片本地預(yù)覽，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對話框的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云
這篇文章介紹了vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue使用i18n實(shí)現(xiàn)國際化的方法詳解
這篇文章主要給大家介紹了關(guān)于vue使用i18n如何實(shí)現(xiàn)國際化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue實(shí)現(xiàn)路由懶加載的詳細(xì)步驟
路由懶加載是指在用戶實(shí)際訪問某個特定路由時,才加載該路由相關(guān)組件的機(jī)制,這種方式可以顯著減少初始加載時的 JavaScript 文件大小,從而提高應(yīng)用的加載速度,所以本文給大家介紹了Vue實(shí)現(xiàn)路由懶加載的詳細(xì)步驟,需要的朋友可以參考下2024-11-11
本篇文章主要介紹了Vue2.0 多 Tab切換組件的封裝實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價值,有需要的小伙伴可以了解下2023-10-10