1、需要配合钉钉鉴权操作，允许钉钉定位等权限调用。uniapp在钉钉中免登+鉴权
2、页面中代码如下：
<template>
<view class="page-section page-section-gap map-container">
<map id="maps" style="width: 100%; height: 80vh;" :layer-style='5' :style="{height:mapheight}"
:show-location='true' :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale"
@markertap="markertap" @callouttap='callouttap'>
<!-- 自定义窗口 -->
<cover-view slot="callout">
<template v-for="(item,index) in markers">
<cover-view :marker-id="item.id" :key='index'>
<cover-view class="position-relative" style="width: 92rpx; height: 78rpx;">
<cover-image class="position-absolute" style="width: 92rpx; height: 78rpx;"
:src='item.iconPath'></cover-image>
<cover-view style="top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"
class="border bg-white rounded-circle flex align-center justify-center position-absolute">
<cover-view>{{item.options.cusName}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
</template>
</cover-view>
<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="backToLocation">
<cover-image class="cover-image" @click="backToLocation" src="@/static/images/map/ditudingwei1.png"></cover-image>
<cover-view>
定位
</cover-view>
</cover-view>
</map>
<view v-if="showType">您当前的位置：{{localAddress}}
<br>
<view>备注：点击地图上相应的客户位置，可以显示客户导航信息</view>
</view>
<view v-else="showType">
<u--form labelPosition="left" :model="mapInfo" ref="form1" class="ud-mapForm">
<u-form-item label="客户名称:" prop="name" borderBottom labelWidth=70>
<u--input v-model="mapInfo.name" border="none" readonly></u--input>
</u-form-item>
<u-form-item label="地址:" prop="address" borderBottom labelWidth=40>
<u--input v-model="mapInfo.address" border="none" readonly>
<template slot="suffix">
<uni-icons class="ud-daohang" type="paperplane-filled" size="25" @click="daohang()"></uni-icons>
</template>
</u--input>
</u-form-item>
</u--form>
</view>
</view>
</template>
<script>
import {
listAllCustomer,
getCustomer
} from "@/api/crm/customer.js";
export default {
data() {
return {
latitude: '', //纬度
longitude: '', //经度
markers: [], //标记点数组
scale: 10, //缩放级别
bottomData: false,
localAddress: '',
showType: true,
// 点击选中id
checkedId: 0,
// 选中marker列表下标
markerIndex: -1,
mapInfo: {
name: undefined,
address: undefined,
lianxiren: undefined,
tel: undefined,
longitude: '',
latitude: ''
}
}
},
onReady() {
//调用的函数放到onReady里面
this.getlocal();
this.addMarkers();
},
onLoad() {
},
computed: {
mapheight() {
let data = ''
if (this.bottomData) {
if (this.upTop) {
data = '50px'
} else {
data = '200px'
}
} else {
data = '86vh'
}
return data
},
coverbottom() {
let data = ''
if (this.bottomData) {
data = '20rpx'
} else {
data = '100rpx'
}
return data
}
},
methods: {
//地图标记点; 具体的属性可以看看官网的说明
addMarkers() {
var that = this;
//地图标记点静态数据赋值;
//标记点和连线的意思差不多，标记点的数组是单纯将markers数组中的对象的经纬度通过图片的方式标记出来（图片可以自定义）
listAllCustomer().then(res => {
const pois = res.data;
const vm = this;
console.log("客户数据", pois);
if (pois.length > 0) {
pois.forEach((poi, index) => {
const {
lng,
lat
} = poi;
console.log(poi)
const obj = {
// 因后台客户id为long，地图id为number，会丢失经度，所以改用客户编号cusSn，去掉前缀替代，保证唯一即可
id: poi.cusSn.slice(2),
latitude: parseFloat(poi.latitude),
longitude: parseFloat(poi.longitude),
iconPath: '/static/images/map/ditudingwei.png', //显示的图标
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
alpha: 1, //透明度
title: poi.cusName,
options: {
id: poi.id,
cusSn: poi.cusSn,
cusName: poi.cusName,
address: poi.cusAddress,
},
callout: { //自定义标记点上方的气泡窗口 点击有效
content: poi.cusName+poi.cusSn, //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
};
vm.markers.push(obj);
});
}
})
},
//定位方法;获取当前的经纬度，也可以通过经纬度来获取当前的地理位置，比如：xx省、xx市、xx镇
getlocal: function() {
let _this = this;
dd.device.geolocation.get({
targetAccuracy: 200,
coordinate: 1,
withReGeocode: true,
useCache: false, //默认是true，如果需要频繁获取地理位置，请设置false
onSuccess: function(result) {
console.log('当前位置的经度：' + result.longitude);
console.log('当前位置的纬度：' + result.latitude);
_this.longitude = result.longitude;
_this.latitude = result.latitude;
_this.localAddress = result.address;
},
onFail: function(err) {}
});
},
// 获取点击后的客户信息
getTargetInfo(obj) {
this.mapInfo.name = obj.options.cusName;
this.mapInfo.address = obj.options.address;
this.mapInfo.longitude = obj.longitude;
this.mapInfo.latitude = obj.latitude;
this.showType = false;
},
//地图图标点击事件
markertap(e) {
console.log("===你点击了标记点图标===", e);
},
//地图点击事件
callouttap(e) {
this.checkedId = e.detail.markerId;
let markerId = e.detail.markerId;
for (let i = 0; i < this.markers.length; i++) {
console.log(e.detail.markerId + "----" + this.markers[i].id)
if (this.markers[i].id == e.detail.markerId) {
this.markerIndex = i;
break;
}
}
if (this.markerIndex != -1) {
this.getTargetInfo(this.markers[this.markerIndex]);
} else {
uni.showToast({
title: '暂未该客户信息',
})
}
},
onControltap() {
console.log('da');
},
backToLocation() {
console.log('woshi play');
this.getlocal();
},
daohang() {
dd.biz.map.view({
latitude: this.mapInfo.latitude, // 纬度
longitude: this.mapInfo.longitude, // 经度
title: this.mapInfo.name // 地址/POI名称
});
}
}
}
</script>
<style lang='less' scoped>
.ud-mapForm{
margin-left: 10rpx;
}
.ud-daohang {
margin-right: 10rpx;
}
.map-container {
position: relative;
overflow: hidden;
.cover-view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
color: #484848;
background-color: #fff;
background-size: 120rpx 120rpx;
background-position: center center;
position: absolute;
bottom: 100rpx;
right: 32rpx;
}
.cover-image {
display: inline-block;
width: 30rpx;
height: 30rpx;
}
.customCallout {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
width: 150px;
height: 40px;
display: inline-flex;
padding: 5px 20px;
justify-content: center;
align-items: center;
}
.content {
flex: 0 1 auto;
margin: 0 10px;
font-size: 14px;
}
}
</style>
3、效果图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
