uniapp-vue3項目中引入高德地圖的具體操作
更新時間：2025年05月23日 10:18:09 作者：浩星
這篇文章主要介紹了uniapp-vue3項目中引入高德地圖的具體操作,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
前言：
uniapp-vue3項目中引入高德地圖
實現(xiàn)效果：
注意：明明使用高德地圖，但是左下角顯示騰訊地圖的原因：微信小程序?qū)儆隍v訊生態(tài)體系，<map>組件底層是與騰訊地圖深度集成的
解決辦法：給map標(biāo)簽包一層view，然后定位 bottom:-20px
高德地圖相關(guān)資料引入：
1、去高德地圖官網(wǎng)，登錄以后，創(chuàng)建應(yīng)用，創(chuàng)建key
我的應(yīng)用 | 高德控制臺高德開放平臺官網(wǎng)控制臺提供了高德開發(fā)者Key管理，Key可視化分析等功能。
https://console.amap.com/dev/key/app
2、開發(fā)文檔
創(chuàng)建好key以后，最右邊的設(shè)置，點擊出現(xiàn)彈框，然后點擊微信小程序sdk就可以跳到開發(fā)文檔網(wǎng)站了
跳到這里，然后打開開發(fā)指南，能看到他的官方提供指南信息
以路線規(guī)劃為例，簡單來說就是地圖劃線，可以看到相關(guān)資料
3、下載小程序必要的js文件
相關(guān)下載-微信小程序插件 | 高德地圖API{"download_notice":{"content":"為了讓您的應(yīng)用更加安全，我們已升級到全新的Key系統(tǒng)。為了
https://lbs.amap.com/api/wx/download
可以看到，下載后是個文件夾，里面是個amap-wx.130.js文件
項目中的具體操作使用：
1、uniapp-vue3將文件集成到項目中去
注意：
因為vue3項目，我們高德js沒有出最新js，所以導(dǎo)致無法直接使用，添加一個export default就能使用了
export default {AMapWX}
我個人本地的 amap-wx.js 源碼：
function AMapWX(a){this.key=a.key;this.requestConfig={key:a.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};this.MeRequestConfig={key:a.key,serviceName:"https://restapi.amap.com/rest/me"}}
AMapWX.prototype.getWxLocation=function(a,b){wx.getLocation({type:"gcj02",success:function(c){c=c.longitude+","+c.latitude;wx.setStorage({key:"userLocation",data:c});b(c)},fail:function(c){wx.getStorage({key:"userLocation",success:function(d){d.data&&b(d.data)}});a.fail({errCode:"0",errMsg:c.errMsg||""})}})};
AMapWX.prototype.getMEKeywordsSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.keywords&&(d.keywords=b.keywords);b.city&&(d.city=b.city);b.filter&&(d.filter=b.filter);b.sortrule&&(d.sortrule=b.sortrule);b.pageNum&&(d.pageNum=b.pageNum);b.pageSize&&(d.pageSize=b.pageSize);b.sig&&(d.sig=
b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/local",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})};
AMapWX.prototype.getMEIdSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.id&&(d.id=b.id);b.sig&&(d.sig=b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/id",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&
0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})};
AMapWX.prototype.getMEPolygonSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.keywords&&(d.keywords=b.keywords);b.polygon&&(d.polygon=b.polygon);b.filter&&(d.filter=b.filter);b.sortrule&&(d.sortrule=b.sortrule);b.pageNum&&(d.pageNum=b.pageNum);b.pageSize&&(d.pageSize=b.pageSize);
b.sig&&(d.sig=b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/polygon",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})};
AMapWX.prototype.getMEaroundSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.keywords&&(d.keywords=b.keywords);b.center&&(d.center=b.center);b.radius&&(d.radius=b.radius);b.filter&&(d.filter=b.filter);b.sortrule&&(d.sortrule=b.sortrule);b.pageNum&&(d.pageNum=b.pageNum);b.pageSize&&
(d.pageSize=b.pageSize);b.sig&&(d.sig=b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/around",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})};
AMapWX.prototype.getGeo=function(a){var b=this.requestConfig,c=a.options;b={key:this.key,extensions:"all",s:b.s,platform:b.platform,appname:this.key,sdkversion:b.sdkversion,logversion:b.logversion};c.address&&(b.address=c.address);c.city&&(b.city=c.city);c.batch&&(b.batch=c.batch);c.sig&&(b.sig=c.sig);wx.request({url:"https://restapi.amap.com/v3/geocode/geo",data:b,method:"GET",header:{"content-type":"application/json"},success:function(d){(d=d.data)&&d.status&&"1"===d.status?a.success(d):a.fail({errCode:"0",
errMsg:d})},fail:function(d){a.fail({errCode:"0",errMsg:d.errMsg||""})}})};
AMapWX.prototype.getRegeo=function(a){function b(d){var e=c.requestConfig;wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:c.key,location:d,extensions:"all",s:e.s,platform:e.platform,appname:c.key,sdkversion:e.sdkversion,logversion:e.logversion},method:"GET",header:{"content-type":"application/json"},success:function(g){if(g.data.status&&"1"==g.data.status){g=g.data.regeocode;var h=g.addressComponent,f=[],k=g.roads[0].name+"\u9644\u8fd1",m=d.split(",")[0],n=d.split(",")[1];if(g.pois&&
g.pois[0]){k=g.pois[0].name+"\u9644\u8fd1";var l=g.pois[0].location;l&&(m=parseFloat(l.split(",")[0]),n=parseFloat(l.split(",")[1]))}h.provice&&f.push(h.provice);h.city&&f.push(h.city);h.district&&f.push(h.district);h.streetNumber&&h.streetNumber.street&&h.streetNumber.number?(f.push(h.streetNumber.street),f.push(h.streetNumber.number)):f.push(g.roads[0].name);f=f.join("");a.success([{iconPath:a.iconPath,width:a.iconWidth,height:a.iconHeight,name:f,desc:k,longitude:m,latitude:n,id:0,regeocodeData:g}])}else a.fail({errCode:g.data.infocode,
errMsg:g.data.info})},fail:function(g){a.fail({errCode:"0",errMsg:g.errMsg||""})}})}var c=this;a.location?b(a.location):c.getWxLocation(a,function(d){b(d)})};
AMapWX.prototype.getWeather=function(a){function b(g){var h="base";a.type&&"forecast"==a.type&&(h="all");wx.request({url:"https://restapi.amap.com/v3/weather/weatherInfo",data:{key:d.key,city:g,extensions:h,s:e.s,platform:e.platform,appname:d.key,sdkversion:e.sdkversion,logversion:e.logversion},method:"GET",header:{"content-type":"application/json"},success:function(f){if(f.data.status&&"1"==f.data.status)if(f.data.lives){if((f=f.data.lives)&&0<f.length){f=f[0];var k={city:{text:"\u57ce\u5e02",data:f.city},
weather:{text:"\u5929\u6c14",data:f.weather},temperature:{text:"\u6e29\u5ea6",data:f.temperature},winddirection:{text:"\u98ce\u5411",data:f.winddirection+"\u98ce"},windpower:{text:"\u98ce\u529b",data:f.windpower+"\u7ea7"},humidity:{text:"\u6e7f\u5ea6",data:f.humidity+"%"}};k.liveData=f;a.success(k)}}else f.data.forecasts&&f.data.forecasts[0]&&a.success({forecast:f.data.forecasts[0]});else a.fail({errCode:f.data.infocode,errMsg:f.data.info})},fail:function(f){a.fail({errCode:"0",errMsg:f.errMsg||""})}})}
function c(g){wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:d.key,location:g,extensions:"all",s:e.s,platform:e.platform,appname:d.key,sdkversion:e.sdkversion,logversion:e.logversion},method:"GET",header:{"content-type":"application/json"},success:function(h){if(h.data.status&&"1"==h.data.status){h=h.data.regeocode;if(h.addressComponent)var f=h.addressComponent.adcode;else h.aois&&0<h.aois.length&&(f=h.aois[0].adcode);b(f)}else a.fail({errCode:h.data.infocode,errMsg:h.data.info})},
fail:function(h){a.fail({errCode:"0",errMsg:h.errMsg||""})}})}var d=this,e=d.requestConfig;a.city?b(a.city):d.getWxLocation(a,function(g){c(g)})};
AMapWX.prototype.getPoiAround=function(a){function b(e){e={key:c.key,location:e,s:d.s,platform:d.platform,appname:c.key,sdkversion:d.sdkversion,logversion:d.logversion};a.querytypes&&(e.types=a.querytypes);a.querykeywords&&(e.keywords=a.querykeywords);wx.request({url:"https://restapi.amap.com/v3/place/around",data:e,method:"GET",header:{"content-type":"application/json"},success:function(g){if(g.data.status&&"1"==g.data.status){if((g=g.data)&&g.pois){for(var h=[],f=0;f<g.pois.length;f++){var k=0==
f?a.iconPathSelected:a.iconPath;h.push({latitude:parseFloat(g.pois[f].location.split(",")[1]),longitude:parseFloat(g.pois[f].location.split(",")[0]),iconPath:k,width:22,height:32,id:f,name:g.pois[f].name,address:g.pois[f].address})}a.success({markers:h,poisData:g.pois})}}else a.fail({errCode:g.data.infocode,errMsg:g.data.info})},fail:function(g){a.fail({errCode:"0",errMsg:g.errMsg||""})}})}var c=this,d=c.requestConfig;a.location?b(a.location):c.getWxLocation(a,function(e){b(e)})};
AMapWX.prototype.getStaticmap=function(a){function b(e){c.push("location="+e);a.zoom&&c.push("zoom="+a.zoom);a.size&&c.push("size="+a.size);a.scale&&c.push("scale="+a.scale);a.markers&&c.push("markers="+a.markers);a.labels&&c.push("labels="+a.labels);a.paths&&c.push("paths="+a.paths);a.traffic&&c.push("traffic="+a.traffic);e="https://restapi.amap.com/v3/staticmap?"+c.join("&");a.success({url:e})}var c=[];c.push("key="+this.key);var d=this.requestConfig;c.push("s="+d.s);c.push("platform="+d.platform);
c.push("appname="+d.appname);c.push("sdkversion="+d.sdkversion);c.push("logversion="+d.logversion);a.location?b(a.location):this.getWxLocation(a,function(e){b(e)})};
AMapWX.prototype.getInputtips=function(a){var b=Object.assign({},this.requestConfig);a.location&&(b.location=a.location);a.keywords&&(b.keywords=a.keywords);a.type&&(b.type=a.type);a.city&&(b.city=a.city);a.citylimit&&(b.citylimit=a.citylimit);wx.request({url:"https://restapi.amap.com/v3/assistant/inputtips",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.tips&&a.success({tips:c.data.tips})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||
""})}})};
AMapWX.prototype.getDrivingRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);a.strategy&&(b.strategy=a.strategy);a.waypoints&&(b.waypoints=a.waypoints);a.avoidpolygons&&(b.avoidpolygons=a.avoidpolygons);a.avoidroad&&(b.avoidroad=a.avoidroad);wx.request({url:"https://restapi.amap.com/v3/direction/driving",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&a.success({paths:c.data.route.paths,
taxi_cost:c.data.route.taxi_cost||""})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})};
AMapWX.prototype.getWalkingRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);wx.request({url:"https://restapi.amap.com/v3/direction/walking",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&a.success({paths:c.data.route.paths})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})};
AMapWX.prototype.getTransitRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);a.strategy&&(b.strategy=a.strategy);a.city&&(b.city=a.city);a.cityd&&(b.cityd=a.cityd);wx.request({url:"https://restapi.amap.com/v3/direction/transit/integrated",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&(c=c.data.route,a.success({distance:c.distance||"",taxi_cost:c.taxi_cost||
"",transits:c.transits}))},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})};
AMapWX.prototype.getRidingRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);wx.request({url:"https://restapi.amap.com/v3/direction/riding",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&a.success({paths:c.data.route.paths})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})};module.exports.AMapWX=AMapWX;
export default {AMapWX}2、將集成的 amap-wx.js 引入我們的插件包，不管是unit文件夾或者libs文件都行
3、在頁面上引入并使用
頁面
<template> <!-- 地圖控件 --> <view> <map id="map" :longitude="mapObj.longitude" :latitude="mapObj.latitude" :scale="mapObj.scale" :markers="mapObj.markers" :polyline="mapObj.polyline" @markertap="markertap" ></map> </view> </template>
css部分
<style>
#map{
width:100%;
height:80vh;
}
</style>js部分
1、引入我們的map文件
import amapFile from '../../libs/amap-wx.js'
2、默認(rèn)定義我們的地圖所需的一些字段，這里默認(rèn)是北京的一個地點
let mapObj = reactive({
longitude:116.481028, //經(jīng)度
latitude:39.989643, //維度
scale:17, //地圖默認(rèn)縮放等級
markers: [], //點位數(shù)據(jù)
polyline:[], // 線路信息
})3、獲取我們當(dāng)前的定位信息，并修改默認(rèn)值
uni.getLocation({
type: 'gcj02', //國測局坐標(biāo) gcj02,要使用地圖map必須使用這個
success: res=> {
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
mapObj.longitude = res.longitude
mapObj.latitude = res.latitude
mapObj.polyline=[]
},
fail:err=>{
console.log(err)
},
complete:()=>{
console.log('complete')
}
})4、調(diào)用我們的方法
onLoad((e)=>{
console.log('onLoad',e)
})
onShow(()=>{
initMap()
initData()
})5、如果獲取當(dāng)前位置報錯： 報錯信息：
getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json
解決辦法：
打開：manifest.json 這個文件，小程序配置部分, 添加requiredPrivateInfos 與 permission
其中 getLocation 就是獲取當(dāng)前定位新，其他的根據(jù)實際情況添加把
/* 小程序特有相關(guān) */
"mp-weixin" : {
"appid" : "xxxx",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "xxxxx"
}
},
"requiredPrivateInfos" : [ "chooseAddress", "chooseLocation", "getLocation","onLocationChange","startLocationUpdate" ]
},6、頁面組件源碼分享，map.vue
<template>
<!-- 地圖控件 -->
<view>
<map
id="map"
:longitude="mapObj.longitude"
:latitude="mapObj.latitude"
:scale="mapObj.scale"
:markers="mapObj.markers"
:polyline="mapObj.polyline"
@markertap="markertap"
></map>
</view>
</template>
<script setup>
// import { reactive } from 'vue';
import amapFile from '../../libs/amap-wx.js'
let mapObj = reactive({
longitude:116.481028, //經(jīng)度
latitude:39.989643, //維度
scale:17, //地圖默認(rèn)縮放等級
markers: [], //點位數(shù)據(jù)
polyline:[], // 線路信息
})
let initMap = function(){
const myAmapFun = new amapFile.AMapWX({
key: 'bb934312130143f254b90a4ca4f5f124', // 你的高德地圖API Key
});
console.log('myAmapFun',myAmapFun)
}
let initData = function(){
console.log('init')
uni.getLocation({
type: 'gcj02', //國測局坐標(biāo) gcj02,要使用地圖map必須使用這個
success: res=> {
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
mapObj.longitude = res.longitude
mapObj.latitude = res.latitude
mapObj.polyline=[]
},
fail:err=>{
console.log(err)
},
complete:()=>{
console.log('complete')
}
})
}
let markertap = function(){
}
onLoad((e)=>{
console.log('onLoad',e)
})
onShow(()=>{
initMap()
initData()
})
</script>
<style>
#map{
width:100%;
height:80vh;
}
</style>到此這篇關(guān)于uniapp-vue3項目中引入高德地圖的文章就介紹到這了,更多相關(guān)uniapp vue3引入高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
最近學(xué)習(xí)在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并
這篇文章主要為大家詳細(xì)介紹了Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue3的Refs是一種新的API,用于訪問DOM元素或組件實例,這篇文章主要介紹了Vue3中Refs的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
本篇文章主要介紹了詳解vue.js之綁定class和style的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了vue項目中使用websocket的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue學(xué)習(xí)筆記進階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進階篇之函數(shù)化組件探究，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue 將后臺傳過來的帶html字段的字符串轉(zhuǎn)換為 HTML
這篇文章主要介紹了Vue 將后臺傳過來的帶html字段的字符串轉(zhuǎn)換為 HTML ,需要的朋友可以參考下2018-03-03