uni中使用地圖還是挺麻煩的，文檔還要借鑒人家小程序的文檔

先做最基本的地圖

首先在高德地圖的控制臺里下載小程序的SDK（不管你是不是開發小程序，都是這個）
點這里直接下載
然后把壓縮包里的amap-wx.js放到工程的common目錄下
不添加這個的話沒法用高德地圖提供的一些方法

制作地圖頁的時候建議使用nvue頁面，即使原來的頁面都是vue也沒關系，因為map的好多屬性和方法不支持vue頁面

map的相關屬性看官方文檔
組件控制方法也在官方文檔

地圖是用uniapp的map組件加載出來的，所以使用的時候直接寫一個map標簽就行了，script中引入amap-wx.js文件

<template><view class="map"><mapid="my-map"ref="my-map"></map></view> </template> <script> var amapFile = require('@/common/amap-wx.js'); var myAmapFun = new amapFile.AMapWX({ key: '這里寫在高德申請的key' }); export default {onReady: function(res) {this.mapContext = uni.createMapContext('my-map', this);//創建mapContext對象，為了用uni提供的組件控制方法}, } </script>

map可以自定義控件，但是我不知道是因為BUG還是我代碼的問題，data中寫一個控件沒問題，再加一個的話就沒有了
所以我的控件現在是用cover-view和cover-image做的

使用uni提供的一些方法

getMyLocation() {let that = this;uni.getLocation({type: 'gcj02',//uniapp只支持gch02坐標，用到map上的話一定要改success: function(res) {that.myLatitude = res.latitude;that.myLongitude = res.longitude;console.log(that.myLatitude);console.log(that.myLongitude);},fail: function(e) {console.log(e);}}); }

這種獲取位置的方法和其他方法的使用差不多，直接uni.····就行了

還有一種是組件控制方法
比如縮放視野展示所有經緯度
that.mapContext指的是上面寫在onReady里的那個

let that = this that.mapContext.includePoints({points:[{latitude:that.myLatitude,//定義在data中的我的緯度longitude:that.myLongitude//定義在data中的我的經度},{latitude:that.makers[0].latitude,//地圖上一個maker的緯度longitude:that.makers[0].longitude//地圖上一個maker的經度}] })

最后一種是高德地圖提供的方法（只能看微信小程序的那個文檔）
比如用高德地圖獲取天氣

onLoad() {let that = this;var myAmapFun = new amapFile.AMapWX({ key: that.$store.state.amapKey });myAmapFun.getWeather({success: function(data) {that.weather = data.weather.data;//獲取到的天氣that.temperature = data.temperature.data;//獲取到的氣溫console.log(data.weather.data);},fail: function(info) {console.log(info);}}); }

最后貼上我的Map.nvue

<template><view class="map"><mapid="my-map"ref="my-map"class="my-map":style="{ height: allScreen - 44 + 'px' }":latitude="myLatitude":longitude="myLongitude":markers="makers"enable-3D="true"show-compass="true"show-location="true":polyline="myPolyline"></map><!-- 樣式里減44px是因為默認的導航欄高度為44px --><cover-view class="control-btn"><cover-view class="location" @tap="locationClick"><cover-image class="control-btn-location-img" src="../../static/imgs/location.png"></cover-image></cover-view><cover-view class="assemble" @tap="getRoute"><cover-image class="control-btn-assemble-img" src="../../static/imgs/assemble.png"></cover-image></cover-view><cover-view class="weather"><cover-image :src="weatherImg" class="weather-img"></cover-image><cover-view class="wearth-txt">{{ temperature + '℃' }}</cover-view></cover-view></cover-view></view> </template><script> var amapFile = require('@/common/amap-wx.js');export default {data() {return {// id: 0,allScreen: '',myLatitude: '', //緯度myLongitude: '', //經度makers: [{id: 1,latitude: '緯度，不給看',longitude: '經度，也不給看',title: '測試點',iconPath: '/static/imgs/edit-maker.png',width: '50px',height: '50px'}],weather: '',//天氣temperature: '',//溫度myPolyline:[]//路線};},onLoad() {let that = this;var myAmapFun = new amapFile.AMapWX({ key: that.$store.state.amapKey });that.getMyLocation();uni.getSystemInfo({success: function(e) {that.allScreen = e.screenHeight;},fail: function(e) {console.log(e);}});myAmapFun.getWeather({success: function(data) {that.weather = data.weather.data;that.temperature = data.temperature.data;console.log(data.weather.data);},fail: function(info) {//失敗回調console.log(info);}});},onReady: function(res) {this.mapContext = uni.createMapContext('my-map', this);},methods: {getRoute() {let that = this;var myAmapFun = new amapFile.AMapWX({ key: that.$store.state.amapKey });that.mapContext.includePoints({//縮放視野展示所有經緯度points:[{latitude:that.myLatitude,longitude:that.myLongitude},{latitude:that.makers[0].latitude,longitude:that.makers[0].longitude}]})var myLocal = that.myLongitude+','+that.myLatitudevar target = that.makers[0].longitude+','+that.makers[0].latitudemyAmapFun.getWalkingRoute({//獲取步行線路origin: myLocal,destination: target,success: function(data) {console.log(data);//獲取線路規劃的數據，后面還需要在地圖上畫出來，未完成，完成后會發新博客},fail: function(info) {console.log(info);}});},getMyLocation() {let that = this;uni.getLocation({type: 'gcj02',success: function(res) {that.myLatitude = res.latitude;that.myLongitude = res.longitude;console.log('myLatitude為' + that.myLatitude);console.log('myLongitude為' + that.myLongitude);},fail: function(e) {console.log(e);}});},locationClick() {console.log('location');let that = this;that.getMyLocation();that.mapContext.moveToLocation({longitude: that.myLongitude,latitude: that.myLatitude,success: function(res) {console.log('刷新成功');},fail: function(e) {console.log('調用失敗');console.log(e);},complete: function() {console.log('調用結束');}});},assembleClick() {uni.chooseLocation({success: function(res) {console.log('位置名稱：' + res.name);console.log('詳細地址：' + res.address);console.log('緯度：' + res.latitude);console.log('經度：' + res.longitude);}});}},computed: {weatherImg: function() {//返回天氣圖片，未完善//全部天氣類型在https://lbs.amap.com/api/webservice/guide/tools/weather-code/switch (this.weather) {case '晴':return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd3680c0-797a-11ea-b997-9918a5dda011.png';break;case '多云':return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd29d690-797a-11ea-b94e-47f67ecf8268.png';break;default:return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd34fa20-797a-11ea-b94e-47f67ecf8268.png';}}} }; </script><style scoped> /* nvue好像不能用scss */ .my-map {width: 750rpx; } .control-btn {position: fixed;flex-direction: column;top: 400rpx;left: 20rpx;align-items: center;/* background-color: #f00; */ } .location {margin-bottom: 30rpx;flex-direction: column;align-items: center; } .assemble{flex-direction: column;align-items: center; } .control-btn-location-img {width: 60rpx;height: 60rpx; } .control-btn-assemble-img {width: 80rpx;height: 80rpx; } .control-btn-txt {font-size: 19rpx;text-align: center; } .weather {position: fixed;bottom: 10rpx;right: 50rpx;background-color: #fff;flex-direction: row;align-items: center; } .weather-img {width: 50rpx;height: 50rpx; } .wearth-txt {color: #999999;font-size: 32rpx; } </style>

總結

以上是生活随笔為你收集整理的uniapp使用高德地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。