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、效果图
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用UniGUI调用百度地图添加标注并变更标注图标,可以按照以下步骤进行: 1. 首先,确保已经在UniGUI项目添加了TUniWebBrowser组件,该组件可以用来加载百度地图。 2. 在UniGUI的项目代码,找到需要加载百度地图的位置,并在相应的事件或方法执行以下代码: ```delphi UniWebBrowser1.ViewContent := '<html>' + '<head><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script></head>' + '<body>' + '<div id="map" style="width:100%; height:100%;"></div>' + '<script type="text/javascript">' + 'var map = new BMap.Map("map");' + 'var point = new BMap.Point(116.404, 39.915);' + 'map.centerAndZoom(point, 15);' + 'var marker = new BMap.Marker(point);' + 'map.addOverlay(marker);' + '</script>' + '</body></html>'; ``` 这段代码,`your_ak`需要替换为自己申请的百度地图AK。 3. 上述代码,`BMap.Point(116.404, 39.915)`表示标注的经纬度坐标,可以根据需要进行修改。 4. 如果需要更改标注图标,可以在`BMap.Marker(point)`之后添加以下代码,将默认图标替换为自定义图标: ```delphi 'var myIcon = new BMap.Icon("custom_icon_url", new BMap.Size(30, 30));' + 'marker.setIcon(myIcon);' ``` 其`custom_icon_url`需要替换为你自定义图标的地址。 5. 最后,注意在UniGUI程序设置相应的权限,确保百度地图可以正常加载和使用。 以上就是使用UniGUI调用百度地图添加标注并变更标注图标的简要步骤。希望能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值