概述
uni中使用地图还是挺麻烦的，文档还要借鉴人家小程序的文档
先做最基本的地图
首先在高德地图的控制台里下载小程序的SDK（不管你是不是开发小程序，都是这个）
点这里直接下载
然后把压缩包里的amap-wx.js放到工程的common目录下
不添加这个的话没法用高德地图提供的一些方法
制作地图页的时候建议使用nvue页面，即使原来的页面都是vue也没关系，因为map的好多属性和方法不支持vue页面
map的相关属性看官方文档
组件控制方法也在官方文档
地图是用uniapp的map组件加载出来的，所以使用的时候直接写一个map标签就行了，script中引入amap-wx.js文件
<template>
<view class="map">
<map
id="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">
<map
id="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.myLatitude
var target = that.makers[0].longitude+','+that.makers[0].latitude
myAmapFun.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使用高德地图先做最基本的地图使用uni提供的一些方法的全部内容，希望文章能够帮你解决uniapp使用高德地图先做最基本的地图使用uni提供的一些方法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![【辅助驾驶】图像拼接[4]——车载全景可视系统代码实现一、效果二、处理流程三、代码](/uploads/reation/bcimg12.png)
发表评论 取消回复