uniapp在钉钉中使用地图配置，添加标注点，可进行进行导航

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、效果图