前言
小程序实现新功能，在地图中选取位置添加标记，并在地图中呈现添加的标记，（呈现的是根据当前屏幕范围内的标记），并对标记进行分享，删除，编辑，导航，并从分享标记点位置打开页面的时候在呈现该标记的信息详情，
部分代码解释
scale：地图缩放级别
markers：标记点
callouttap：标记点点击事件
markertap：markers内容的点击事件，就是自定义内容的点击事件
regionchange：推拽事件
regionchange - begin ：拖拽开始事件
regionchange - end：拖拽结束事件
this.mapContext = uni.createMapContext("map", this); // 创建地图上下文
that.mapContext.getCenterLocation： 获取中心点位置
that.mapContext.getRegion ： 获取后获取对角坐标
that.mapContext.getScale ： 获取缩放级别
更多更详细地图上下文接口点击这里（uniapp官网，进去就是地图上下文相关）
uni.chooseLocation 和 uni.getLocation 使用的时候需要先声明
部分功能图片预览
声明：图片中内容为随机添加，内容也是胡乱写的
拖动地图，位置也会及时更新，选取添加的标记点位置
地图首页
添加修改标记页面和搜索页面就没必要放上来了，都是一些基础的样式和添加逻辑，根据个人情况写就行了，主要就是添加标记，（添加页面传递参数就是进度和纬度，有重要这两个数据就可以了），bijiaoInfos，就是分享和搜索页面传递过来的，根据id请求详情，拿到经纬度，把这个坐标定为中心点，再让地图重新加载，然后在自动弹出这个id的详情弹窗，就是示例的第二张图，通过搜索和分享进来看到的就是这个页面。
还有 - 记得点赞！！
<template>
<view>
<view class="search-box">
<view class="search" @click="searchFocus">
<text class="iconfont icon-sousuo-copy-copy"></text>
<text>请输入搜索内容</text>
<!-- <input type="text" v-model="search" @focus="searchFocus" placeholder="请输入搜索内容"> -->
</view>
</view>
<view class="titleNum">
当前区域标记数量为: {{ titleNum }}
</view>
<map id="map" class="map" style="width: 100%; height: 100vh;" :scale="scale" :latitude="latitude"
:longitude="longitude" :markers="covers" @callouttap='mapAction' @markertap="mapAction"
@regionchange="regionchange">
</map>
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<text @click="closePopup" class="iconfont icon-x"></text>
<view class="popup-content-top">
<view>{{ bijiaoInfo.title }}</view>
<view>{{ bijiaoInfo.address }}</view>
</view>
<view class="popup-content-content">
<view class="popup-content-title">备注</view>
<view class="popup-content-text">{{ bijiaoInfo.bz }}</view>
</view>
<view class="popup-content-content">
<view class="popup-content-title">创建人</view>
<view class="popup-content-text">{{ bijiaoInfo.username }} - {{ bijiaoInfo.addtime }}</view>
</view>
<view class="popup-img">
<image @click="previewImage(index)" v-for="item, index in bijiaoInfo.picurls_path" :key="index"
:src="item" mode="scaleToFill" />
</view>
<view class="popup-bom">
<view class="popup-bom-left">
<view class="popup-bom-left-item del" @click="delBiaoJi">
<text class="iconfont icon-shanchu"></text>
<text>删除</text>
</view>
<button open-type="share" class="popup-bom-left-item">
<text class="iconfont icon-fenxiang"></text>
<text>分享</text>
</button>
<view class="popup-bom-left-item" @click="biaoJiSave">
<text class="iconfont icon-beizhu"></text>
<text>编辑</text>
</view>
</view>
<view @click="goNavigation" class="popup-bom-right">导航</view>
</view>
</view>
</uni-popup>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="提示"
:content="'您确定要删除' + bijiaoInfo.title + '标记点吗?'" @confirm="dialogConfirm"></uni-popup-dialog>
</uni-popup>
<view @click="goMyLocation" class="iconfont icon-wodeweizhi"></view>
<view class="gongNeng">
<view class="gongNeng-item" @click="quanLanAction">
<view class="iconfont icon-quanlan"></view>
<view>全览</view>
</view>
<view class="gongNeng-item huadian" @click="biaoJiAction">
<view class="iconfont icon-weizhi"></view>
<view>画点</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
titleNum: 0,
currentLocation: {},
scale: 14,// 地图缩放级别
id: null, //
title: 'map',
// 地图中心点 为空 默认北京
latitude: null,
longitude: null,
covers: [],
myLatitude: null,
myLongitude: null,
search: '',//搜索内容
searchList: [],
mapContext: '',//地图对象
zuobiao: {},//拖拽坐标
my_zuobiao: {},//我的坐标
isMarking: false, // 标记模式开关
centerMarker: null, // 中心点标记
type: 'bottom',
bijiaoInfo: {},
currentPage: 1,
totle_page: 0,
}
},
onLoad(options) {
console.log("options", JSON.parse(JSON.stringify(options)));
if (options.id) {
this.id = options.id;
this.bijiaoInfos();
}
// this.biaojiIndex();
uni.$on('callreload', () => {
this.biaojiIndex();
});
this.getLocation();
this.mapContext = uni.createMapContext("map", this); // 创建地图上下文
this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
},
onShow() {
uni.getStorage({
key: 'currentLocation',
success: (res) => {
this.currentLocation = res.data
}
})
// latitude: 34.745982,郑州中心点
// longitude: 113.658233,
},
// 下拉刷新
// onPullDownRefresh() {
// this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
// uni.showToast({
// title: '刷新成功',
// icon: 'success',
// duration: 1000
// })
// uni.stopPullDownRefresh(); // 停止刷新
// },
methods: {
searchFocus() {
uni.navigateTo({
url: '/biaoji/searchBiaoJi'
})
},
getLocation() {
uni.getLocation({
type: 'wgs84', // 获取经纬度坐标
accuracy: 'high', // 请求高精度位置
success: (res) => {
console.log("获取经纬度坐标", JSON.parse(JSON.stringify(res)));
// that.latitude = parseFloat(res.latitude.toFixed(5));
// that.longitude = parseFloat(res.longitude.toFixed(5));
this.latitude = parseFloat(res.latitude.toFixed(5));
this.longitude = parseFloat(res.longitude.toFixed(5));
this.myLatitude = parseFloat(res.latitude.toFixed(5));;
this.myLongitude = parseFloat(res.longitude.toFixed(5));;
this.covers = [{
id: 1,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '../static/imgs/map/我的位置.png',
width: 25,
height: 25,
name: '我的位置',
}]
},
fail: (err) => {
console.error('获取位置信息失败', err);
}
});
},
// 分享过来传来的id 显示标记点详情
async bijiaoInfos() {
const res = await this.$axios("biaoji/biaojiInfo", {
id: this.id,
});
console.log("标记地点详情", JSON.parse(JSON.stringify(res.data)));
if (res.data.code == 0) {
this.bijiaoInfo = res.data.result;
const latitude = parseFloat(res.data.result.latitude)
const longitude = parseFloat(res.data.result.longitude)
this.mapContext.moveToLocation({
latitude: latitude.toFixed(5),
longitude: longitude.toFixed(5),
success: () => {
// 添加平滑过渡效果
const timer = setTimeout(() => {
// 在移动后更新缩放级别
this.latitude = latitude.toFixed(5),
this.longitude = longitude.toFixed(5),
this.scale = 14; // 设置为更适合查看的缩放级别
clearTimeout(timer);
this.$refs.popup.open(this.type);
}, 300); // 确保地图移动有足够的时间
},
fail: () => {
uni.showToast({
title: '移动到我的位置失败',
icon: 'none',
duration: 2000
});
}
});
}
},
// 回到我的位置
goMyLocation() {
// 检查用户位置是否可用
if (this.myLatitude === null || this.myLongitude === null) {
uni.showToast({
title: '无法获取当前位置，请确保已授权定位服务',
icon: 'none',
duration: 2000
});
return;
}
// 使用 moveToLocation 平滑移动到用户的位置
this.mapContext.moveToLocation({
latitude: this.myLatitude,
longitude: this.myLongitude,
success: () => {
// 添加平滑过渡效果
const timer = setTimeout(() => {
// 在移动后更新缩放级别
this.latitude = this.myLatitude;
this.longitude = this.myLongitude;
this.scale = 16; // 缩放级别
clearTimeout(timer);
}, 300); // 确保地图移动有足够的时间
},
fail: () => {
uni.showToast({
title: '移动到我的位置失败',
icon: 'none',
duration: 2000
});
}
});
},
// 全览
quanLanAction() {
if (this.myLatitude === null || this.myLongitude === null) {
uni.showToast({
title: '无法获取当前位置，请确保已授权定位服务',
icon: 'none',
duration: 2000
});
return;
}
// 使用 moveToLocation 平滑移动到用户的位置
this.mapContext.moveToLocation({
latitude: this.myLatitude,
longitude: this.myLongitude,
success: () => {
// 添加平滑过渡效果
const timer = setTimeout(() => {
// 在移动后更新缩放级别
this.latitude = this.myLatitude;
this.longitude = this.myLongitude;
this.scale = 11; // 缩放级别
clearTimeout(timer);
}, 300); // 确保地图移动有足够的时间
},
fail: () => {
uni.showToast({
title: '全览失败',
icon: 'none',
duration: 2000
});
}
});
},
async GetMapData() {
const res = await this.$axios("work/getMap", {
lat: this.location.latitude,
lon: this.location.longitude
});
console.log("当前位置的名称", JSON.parse(JSON.stringify(res)));
if (res.data.code == 0) {
this.location_data = res.data.result;
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
})
}
},
// 获取首次屏幕对焦经纬度
getInitialFocusCoordinates() {
this.mapContext.getRegion({
success: (res) => {
console.log("获取首次屏幕对焦经纬度", JSON.parse(JSON.stringify(res)));
const northeast = res.northeast; // 东北角
const southwest = res.southwest; // 西南角
const zuobiao = {
northeast: northeast,
southwest: southwest
};
this.zuobiao = [zuobiao.northeast, zuobiao.southwest];
this.biaojiIndex();
},
fail: (err) => {
console.error('获取对焦经纬度失败:', err);
}
});
},
// 标记地点数据
async biaojiIndex() {
const res = await this.$axios("biaoji/biaojiIndex", {
title: '',
zuobiao: this.zuobiao,
scale: this.scale,
page: '',//页码
limit: '',//每页数量
})
console.log("标记地点数据", JSON.parse(JSON.stringify(res.data)));
if (res.data.code == 0) {
this.titleNum = res.data.totle_num;
this.covers = res.data.lists.map(item => {
return {
id: item.id,
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
// iconPath: '/static/images/map.png',
width: 22,
height: 22,
callout: {
content: item.title,
display: 'ALWAYS',
color: '#ffffff',
fontSize: 12,
borderRadius: 4,
bgColor: '#000',
padding: '5',
}
}
});
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
})
}
},
// 地图标记点点击事件
async mapAction(e) {
console.log("markers 内容的点击事件", JSON.parse(JSON.stringify(e)));
this.$refs.popup.open(this.type);
const res = await this.$axios("biaoji/biaojiInfo", {
id: e.detail.markerId
});
console.log("标记地点详情", JSON.parse(JSON.stringify(res.data)));
if (res.data.code == 0) {
this.bijiaoInfo = res.data.result;
}
},
//监听地图拖拽
regionchange(data) {
// console.log("拖拽", JSON.parse(JSON.stringify(data)));
const that = this;
if (data.type == "end") {
// 获取拖拽后的中心点
that.mapContext.getCenterLocation({
success: function (res) {
that.latitude = parseFloat(res.latitude.toFixed(5));
that.longitude = parseFloat(res.longitude.toFixed(5));
// 获取后获取对角坐标
that.mapContext.getRegion({
success: (res) => {
const zuobiao = {
northeast: res.northeast,
southwest: res.southwest
};
that.zuobiao = [zuobiao.northeast, zuobiao.southwest];
// 获取缩放级别
that.mapContext.getScale({
success: (res) => {
if (res.scale !== that.scale) {
that.scale = res.scale; // 更新缩放级别
}
}
})
that.biaojiIndex();
}
})
}
});
}
},
// 添加标记点
biaoJiAction() {
uni.getSetting({
success: (res) => {
if (res.authSetting['scope.userLocation']) { /* 用户授权成功时走这里 */
this.handerChooseLocation()
} else if (res.authSetting['scope.userLocation'] === undefined) { /* 用户未授权时走这里 */
console.log('没有授权')
this.handleOpenSetting()
} else { /* 用户拒绝了授权后走这里 */
console.log('拒绝了授权 false')
this.handleOpenSetting()
}
},
})
},
handerChooseLocation() {
uni.chooseLocation({
latitude: this.latitude,
longitude: this.longitude,
success: (res) => {
// console.log('wx.chooseLocation res=', res)
uni.setStorageSync('currentLocation', res)
uni.navigateTo({
url: '/biaoji/biaojiInfo?status=1&res=' + JSON.stringify(res)
})
},
fail: function (err) {
console.log('取消按钮', err)
}
})
},
handleOpenSetting() {
wx.openSetting({
success: (res) => {
console.log('定位 openSetting', res)
if (res.authSetting["scope.userLocation"]) {
this.handerChooseLocation()
}
}
})
},
// 关闭弹窗
closePopup() {
this.$refs.popup.close();
if (this.id != null) {
this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
this.id = null;
}
},
// 右上角分享
onShareAppMessage() {
return {
title: this.bijiaoInfo.title,
path: '/biaoji/biaoji?id=' + this.bijiaoInfo.id, //自定义路径
// imageUrl: '分享图片链接',
};
},
// 右上角分享到朋友圈
onShareTimeline() {
return {
title: this.bijiaoInfo.title,
path: '/biaoji/biaoji', //自定义路径
// imageUrl: this.shareImg //自定义展示图片
};
},
// 导航
goNavigation() {
// 导航跳转
uni.openLocation({
latitude: parseFloat(this.bijiaoInfo.latitude),
longitude: parseFloat(this.bijiaoInfo.longitude),
name: this.bijiaoInfo.title,
address: this.bijiaoInfo.address,
success: function (res) {
console.log('打开系统位置地图成功')
},
fail: function (error) {
console.log(error)
}
})
},
// 图片预览
previewImage(index) {
uni.previewImage({
urls: this.bijiaoInfo.big_picurls,
current: index, // 当前显示图片的索引
loop: true // 是否开启图片轮播
});
},
// 删除标记点
async delBiaoJi() {
this.$refs.alertDialog.open()
},
// 删除标记点
async dialogConfirm() {
const res = await this.$axios("biaoji/biaojiDel", {
id: this.bijiaoInfo.id
})
console.log("删除标记点", JSON.parse(JSON.stringify(res)));
if (res.data.code == 0) {
this.$refs.popup.close()
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 1000
})
this.getLocation();
this.biaojiIndex();
this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
})
}
},
// 修改标记点
biaoJiSave() {
this.$refs.popup.close()
uni.navigateTo({
url: '/biaoji/biaojiInfo?status=2&id=' + this.bijiaoInfo.id
})
},
}
}
</script>
<style lang="scss" scoped>
.search-box {
background-color: white;
padding: 0.5rem 0;
.search {
width: 90%;
margin: auto;
display: flex;
align-items: center;
font-size: 14px;
background-color: #f7f7f7;
padding: 0.4rem;
border-radius: 30px;
.icon-sousuo-copy-copy {
font-size: 14px;
margin-right: 10px;
margin-left: .5rem;
}
text {
color: DarkGray;
}
}
}
.icon-wodeweizhi {
position: fixed;
left: 2%;
bottom: 5%;
background-color: white;
padding: 0.5rem;
z-index: 3;
border-radius: 10px;
}
.gongNeng {
position: fixed;
right: 2%;
bottom: 5%;
border-radius: 10px;
background-color: white;
padding: 0.5rem;
z-index: 3;
.gongNeng-item {
font-size: 12px;
text-align: center;
}
.huadian {
margin-top: 0.5rem;
.iconfont {
margin-bottom: 0.3rem;
}
}
}
.popup-content {
position: relative;
padding: 1rem 0;
// font-size: 1px;
.icon-x {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 20px;
}
.popup-content-top {
margin: 0 1rem;
border-bottom: 1px solid #f7f7f7;
padding-bottom: 0.5rem;
view:nth-of-type(1) {
font-size: 14px;
margin-top: 0.3rem;
font-weight: bold;
}
view:nth-of-type(2) {
font-size: 10px;
margin-top: 0.3rem;
color: #666666;
}
}
.popup-content-content {
margin: 0 1rem;
border-bottom: 1px solid #f7f7f7;
padding-bottom: 0.5rem;
.popup-content-text {
margin-top: 0.3rem;
font-size: 12px;
}
}
.popup-content-title {
font-weight: bold;
font-size: 12px;
margin-top: 0.3rem;
}
.popup-img {
margin: 0.5rem 1rem;
image {
margin-right: 0.3rem;
width: 80px;
height: 80px;
}
}
.popup-bom {
margin: 0 1rem;
margin-top: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f7f7f7;
.popup-bom-left {
display: flex;
align-items: center;
font-size: 12px;
.popup-bom-left-item {
.iconfont {
margin-right: 0.2rem;
}
}
.del {
color: #f56c6c;
}
button {
font-size: 12px;
background-color: white;
// height: 60px;
}
button::after {
border: none;
}
}
.popup-bom-right {
color: white;
background-color: #377fff;
border-radius: 30px;
padding: 0.3rem 0.8rem;
font-size: 14px;
text-align: center;
}
}
}
.searchDialog {
background-color: white;
height: 50vh;
}
.titleNum {
position: fixed;
left: 0.2rem;
top: 3.5rem;
background-color: white;
padding: 0.3rem;
z-index: 5;
font-size: 14px;
border-radius: 5px;
}
</style>
![为什么应用程序是特定于操作系统的？[计算机原理]](https://i-blog.csdnimg.cn/direct/d24fb89fcc554f7eb3d53393ef1d71f5.png)
