map地图的使用
大约 19 分钟
map地图的使用
注意：在app端用nvue使用map地图是最佳选择
map在nvue中的使用
1、首先需要配置manifest.json的key 
2、配置高德地图定位,这样才可以使用gcj02地址解析信息(前提需在高德开放平台配置相关信息) 
uniapp地址说明 https://uniapp.dcloud.net.cn/tutorial/app-geolocation.html# 3、根据官方文档编写组件 map 组件：https://uniapp.dcloud.net.cn/component/map.html map组件位置的获取及各种操作：https://uniapp.dcloud.net.cn/api/location/location.html
案例一
可以定位到当前，可以切换地图样式(路况图和卫星图)
<template>
<!-- App地图 -->
<view class="cont" :style="[{width: windowWidth+'px'},{height: windowHeight+'px'}]">
<map class="cont_map" id="map" :style="[{width: windowWidth+'px'},{height: windowHeight+'px'}]" :scale="scale"
:latitude="latitude" :enable-traffic='enabletraffic' :enable-satellite="enablesatellite"
:longitude="longitude" :markers="covers" :circles="circles">
<view class="cover_maps">
<view class="cover_maps_images">
<view class="images_one">
<view class="images_btn" @click="onSatellite">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
<view class="images_btn" style="margin-top: 30rpx;" @click="onTraffic">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
</view>
<view class="images_one">
<view class="images_btn" @click="position">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
<view class="images_btn" style="margin-top: 30rpx;" @click="positions">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="cover_map">
<view class="cover_map_one">
<text class="one1">我的车辆</text>
<text class="one2">在线</text>
</view>
<view class="cover_map_two">
<text class="two1">定位时间</text>
<text class="two2">2022-11-11-55</text>
</view>
<view class="cover_map_two">
<text class="two1">主机SN</text>
<text class="two2">454545454545454545454</text>
</view>
<view class="cover_map_two"
style="padding-bottom: 15rpx;border-bottom: 1rpx solid rgba(0,0,0,0.2)">
<text class="two1">地址</text>
<text class="two2">
等等等等等等等等等等等等等等等等等等等等等等等等等等等等
</text>
</view>
<view class="cover_map_three">
<view class="three_center" @click="onJuml(1)">
<image class="three_img" src="../../static/logo.png" mode="widthFix"></image>
<text class="three1">电子围栏</text>
</view>
<view class="three_center" @click="onJuml(2)">
<image class="three_img" src="../../static/logo.png" mode="widthFix"></image>
<text class="three1">历史轨迹</text>
</view>
<view class="three_center" @click="onJuml(3)">
<image class="three_img" src="../../static/logo.png" mode="widthFix"></image>
<text class="three1">导航到车</text>
</view>
</view>
</view>
</view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
windowWidth: 0,
windowHeight: 0,
enabletraffic: false,
enablesatellite: false,
latitude: 22.7015600, //中心维度
longitude: 113.9536894, //中心经度
scale: 13, //缩放级别
// 配置显示点，有多个就配置多个 多个标记点可以在地图上显示
covers: [{
id: 1,
latitude: 22.7015600, //维度
longitude: 113.9536894, //经度
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
iconPath: '/static/image/map_icon.png', //显示的图标
anchor:{
x:0.5,
y:0.5
}
}],
// 这个表示当前的位置
circles: []
}
},
onLoad() {
// 地图全屏展示
let pixe = uni.getWindowInfo()
this.windowWidth = pixe.windowWidth
this.windowHeight = pixe.windowHeight
},
onShow() {
// this.openload()
this.userload()
},
methods: {
// 是否显示路况
onTraffic() {
this.enabletraffic = !this.enabletraffic
},
// 是否开启卫星图
onSatellite() {
this.enablesatellite = !this.enablesatellite
},
// 车辆回到定位点
position() {
const that = this;
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
latitude: this.covers[0].latitude,
longitude: this.covers[0].longitude,
});
},
// 车主回到定位点
positions() {
const that = this;
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
latitude: this.circles[0].latitude,
longitude: this.circles[0].longitude,
});
},
//获取车主的坐标
userload() {
const that = this;
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
geocode: true, //默认false，是否解析地址信息
isHighAccuracy: true,
success: function(res) {
// if(that.covers.length>=2){
// that.covers.pop()
// }
that.circles = [{
latitude:res.latitude,
longitude:res.longitude,
color:'rgba(70, 144, 255, 0.3)',
fillColor:'rgba(70, 144, 255, 0.3)',
radius:200,
strokeWidth:0
}]
}
});
},
onJuml(e){
const that = this;
if(e==1){
uni.navigateTo({
url:'/pages/afence/afence'
})
}
if(e==2){
}
if(e==3){
// 打开外部地图
uni.openLocation({
latitude: that.covers[0].latitude,
longitude:that.covers[0].longitude,
success: function() {
console.log('success');
}
});
}
},
}
}
</script>
<style scoped lang="scss">
.cover_maps {
position: absolute;
bottom: 15rpx;
right: 30rpx;
}
.cover_map {
width: 690rpx;
background-color: #ffffff;
border-radius: 30rpx;
}
.cover_map_one {
width: 630rpx;
margin: 0 30rpx;
padding: 15rpx 0;
flex-direction: row;
justify-content: space-between;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
.one1,
.one2 {
font-size: 28rpx;
}
}
.cover_map_two {
width: 630rpx;
margin: 15rpx 30rpx 0 30rpx;
flex-direction: row;
.two1,
.two2 {
font-size: 28rpx;
}
.two1 {
width: 150rpx;
}
.two2 {
width: 480rpx;
}
}
.cover_map_three {
margin: 15rpx 30rpx;
width: 630rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
.three_center {
align-items: center;
.three1 {
font-size: 28rpx;
}
}
.three_img {
margin-bottom: 5rpx;
width: 50rpx;
height: 50rpx;
}
}
.cover_maps_images {
margin-right: 15rpx;
align-items: flex-end;
justify-content: flex-end;
}
.images_one {
width: 90rpx;
background-color: #ffffff;
padding: 40rpx 20rpx;
border-radius: 40rpx;
margin-bottom: 15rpx;
}
.images_btn {
width: 50rpx;
height: 50rpx;
}
</style>
案例二
可以设置当前定位的一个范围值
<template>
<!-- App地图 -->
<view class="cont" :style="[{width: windowWidth+'px'},{height: windowHeight+'px'}]">
<map v-if="maptype" class="cont_map" id="map" :style="[{width: windowWidth+'px'},{height: windowHeight+'px'}]" :scale="scale"
:latitude="latitude" :enable-traffic='enabletraffic' :enable-satellite="enablesatellite"
:longitude="longitude" :markers="covers" :circles="circles">
<view class="cover_maps">
<view class="cover_maps_images">
<view class="images_one">
<view class="images_btn" @click="onSatellite">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
<view class="images_btn" style="margin-top: 30rpx;" @click="onTraffic">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
</view>
<view class="images_one" style="margin-bottom: 50rpx;">
<view class="images_btn" @click="position">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
<view class="images_btn" style="margin-top: 30rpx;" @click="positions">
<image case="" src="../../static/logo.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="cover_slider">
<text class="cover_slider_text">{{numberkey}}KM</text>
<slider class="cover_sliders" min="1" max="50" :value="numberkey" @change="sliderChange" />
</view>
<view class="cover_map">
<view class="cover_map_one">
<text class="one1" @click="onBack">返回列表</text>
<text class="one2">保存</text>
</view>
<view class="cover_map_two">
<input type="text" placeholder="围栏名称" class="cover_map_input" style="background-color: rgba(0, 0, 0, 0.2)">
</view>
<view class="cover_map_three">
<view class="three1">
<text class="three_text">入围栏警告</text>
<switch style="transform:scale(0.7)" @change="switch1Change" />
</view>
<view class="three1">
<text class="three_text">出围栏警告</text>
<switch style="transform:scale(0.7)" @change="switch2Change" />
</view>
</view>
</view>
</view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
windowWidth: 0,
windowHeight: 0,
enabletraffic: false,
enablesatellite: false,
latitude: 22.7015600, //中心维度
longitude: 113.9536894, //中心经度
scale: 16, //缩放级别
// 配置显示点，有多个就配置多个 第一个表示车辆坐标，第二个表示车主坐标
covers: [{
id: 1,
latitude: 22.7015600, //维度
longitude: 113.9536894, //经度
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
iconPath: '/static/image/map_icon.png', //显示的图标
//经纬度在标注图标的锚点，默认底边中点 {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
anchor:{
x:0.5,
y:0.5
}
},{
id: 2,
latitude: 22.606957, //维度
longitude: 113.842709, //经度
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
iconPath: '/static/map_icon.png', //显示的图标
}],
// 设置电子围栏范围
circles: [{
latitude:22.7015600,
longitude:113.9536894,
color:'rgba(70, 144, 255, 0.3)',
fillColor:'rgba(70, 144, 255, 0.3)',
radius:100,
strokeWidth:0
}],
maptype:true,
numberkey:10,//电子围栏返回，最大50km
}
},
onLoad() {
// 地图全屏展示
let pixe = uni.getWindowInfo()
this.windowWidth = pixe.windowWidth
this.windowHeight = pixe.windowHeight
},
onShow() {
},
methods: {
onBack(){
uni.navigateBack()
},
sliderChange(e){
this.maptype = false
this.circles[0].radius = e.detail.value*10
this.numberkey = e.detail.value
// this.circles=0
setTimeout(()=>{
this.maptype = true
},1)
// this.circles.push({
// latitude:22.7015600,
// longitude:113.9536894,
// color:'rgba(70, 144, 255, 0.3)',
// fillColor:'rgba(70, 144, 255, 0.3)',
// radius:e.detail.value,
// strokeWidth:0
// })
// console.log(e)
// console.log(this.circles)
// this.$forceUpdate()
},
switch1Change(){
},
switch2Change(){
},
// 是否显示路况
onTraffic() {
this.enabletraffic = !this.enabletraffic
},
// 是否开启卫星图
onSatellite() {
this.enablesatellite = !this.enablesatellite
},
// 车辆回到定位点
position() {
const that = this;
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
latitude: this.covers[0].latitude,
longitude: this.covers[0].longitude,
});
},
// 车主回到定位点
positions() {
const that = this;
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
latitude: this.covers[1].latitude,
longitude: this.covers[1].longitude,
});
},
}
}
</script>
<style scoped lang="scss">
.cover_maps {
position: absolute;
bottom: 15rpx;
right: 30rpx;
}
.cover_map {
width: 690rpx;
background-color: #ffffff;
border-radius: 30rpx;
}
.cover_slider{
align-items: center;
justify-content: center;
.cover_slider_text{
font-size: 28rpx;
font-weight: 600;
}
.cover_sliders{
width: 600rpx;
}
}
.cover_map_one {
width: 690rpx;
flex-direction: row;
justify-content: space-between;
.one1,
.one2 {
padding:30rpx;
font-size: 28rpx;
color: blue;
}
}
.cover_map_two{
justify-content: center;
align-items: center;
.cover_map_input{
width: 630rpx;
height: 80rpx;
border-radius: 10rpx;
padding:0 20rpx;
font-size: 28rpx;
}
}
.cover_map_three{
width: 630rpx;
margin: 30rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
.three1{
flex-direction: row;
align-items: center;
.three_text{
font-size: 28rpx;
font-weight: 600;
}
}
}
.cover_maps_images {
margin-right: 15rpx;
align-items: flex-end;
justify-content: flex-end;
}
.images_one {
width: 90rpx;
background-color: #ffffff;
padding: 40rpx 20rpx;
border-radius: 40rpx;
margin-bottom: 15rpx;
}
.images_btn {
width: 50rpx;
height: 50rpx;
}
</style>