uniapp 使用map组件动态自定义标记点图标及内容文字

2024-06-29 08:39| 来源: 网络整理| 查看: 265

先看效果

地图中的标记点可以动态变化自定义的图片与内容

在这里插入图片描述

原理通过map组件中的 markers 属性设置标记点用于在地图上显示标记的位置

map组件所在uniapp官网位置：map-uni-app https://uniapp.dcloud.io/component/map

1、想要动态改变标记点图标必须把默认的标记点覆盖，用到了markers参数下的 iconPath设置标记点的图标，如果需求只需要简单的动态改变标记点的图标到这一步就结束了，但是如果需要动态改变标记点图标及内容(动态显示文字)就需要看下一步！ 2、把iconPath设置的图片改用一张1*1像素的透明背景图 png格式的。

3、markers 列表中的 customCallout 设置自定义气泡窗口 display: "ALWAYS"总数显示,并在标签内配置 slot="callout"这里注意的是要比map组件层级高必须使用 cover-view 或者 cover-image 标签;

4、map标签上使用 @callouttap事件点击标记点对应的气泡时触发,这样就可以动态获取标记点信息了。

其中、第二步中使用透明背景图把默认标记点隐藏，第三步把自定义气泡弹窗改为标记点，偏移量自行微调到原标记点上方，第四步，获取到点击标记点的回调。这样，就可以实现动态改变标记点图标及内容了。

附上代码(样式缺失,自行修改) {{item.options.labelName}} {{targetInfo.labelName}} {{targetInfo.locationName}} {{targetInfo.address}} {{targetInfo.city}} {{targetInfo.phoneNumber}} 预约导航 import Map from '@/common/js/openMap.js' export default { components: {}, data() { return { // 圆球颜色 color: ['#0797e4', '#2be4ae'], // 定位维度 latitude: 22.26666, // 定位经度 longitude: 113.54342, // 点击选中id checkedId: 0, // 选中marker列表下标 markerIndex: -1, // 点击获取到的标点信息 targetInfo: { labelName: 'A', locationName: '嘉苑', address: '情侣路公交亭', city: '珠海', phoneNumber: '(0123)119119119', latitude: 22.26666, longitude: 113.54342, }, // 标点列表 markers: [ // { // id: 1, //标记点id // clusterId: 1, //自定义点聚合簇效果时使用 // title: '选中', // latitude: 22.26666, //维度 // longitude: 113.54342, //经度 // alpha: 1, //透明度 0-1 // iconPath: '/static/images/map/none.png', // options: { // checked: true, // iconPath: '/static/images/map/select.png', // labelName: 'A', // locationName: '嘉苑', // address: '高新区大学路101号', // city: '珠海', // phoneNumber: '(0123)119119119' // }, // // 自定义窗口 // customCallout: { // anchorX: -1, // anchorY: 46, // display: "ALWAYS" // }, // }, ], // 是否显示圆 circles: [{ latitude: 22.26666, longitude: 113.54342, color: '#2979ffcc', fillColor: '#2979ff61', strokeWidth: 1, radius: 500, }], // 控件 controls: [ ] } }, watch: { // 监听选中下标改变图片 markerIndex(val, oldVal) { this.markers[val].options.iconPath = '/static/images/map/none.png' this.markers[val].options.iconPath = '/static/images/map/select.png'; if (this.markers[oldVal]) { this.markers[oldVal].options.iconPath = '/static/images/map/noselect.png'; } console.log(val, oldVal); } }, computed: { getBgColor() { return `background-image: linear-gradient(90deg, ${this.color[0]}, ${this.color[1]});` } }, created() { this.isGetLocation(); }, methods: { // 测试 ceshi() { for (let i = 0; i id: 1, //标记点id clusterId: 1, //自定义点聚合簇效果时使用 title: '选中', latitude: 22.26666, //维度 longitude: 113.54342, //经度 alpha: 1, //透明度 0-1 iconPath: '/static/images/map/none.png', options: { iconPath: '/static/images/map/noselect.png', labelName: 'A', locationName: '嘉苑', address: '高新区大学路101号', city: '珠海', phoneNumber: '(0123)119119119' }, // 自定义窗口 customCallout: { anchorX: -1, anchorY: 46, display: "ALWAYS" }, } let start = this.markers.length; obj.id = start; obj.clusterId = start; obj.options.labelName = String.fromCharCode(65 + start) // A this.markers.push(obj); } this.markers.forEach((item, index) => { let timer = setTimeout(() => { let suiji = Math.round(Math.random() * 10) * 0.0003; if (Math.round(Math.random() * 5) > 2) { suiji = -suiji; } if (index % 2 != 0) { this.markers[index].longitude = this.longitude + suiji; this.markers[index].latitude = this.latitude + suiji; } else { this.markers[index].longitude = this.longitude + suiji; this.markers[index].latitude = this.latitude - suiji; } console.log(suiji); clearTimeout(timer); timer = null; }, 50 * index) }) setTimeout(() => { this.getTargetInfo(this.markers[0]); }, 1500) }, getTargetInfo(obj) { this.targetInfo.labelName = obj.options.labelName; this.targetInfo.locationName = obj.options.locationName; this.targetInfo.address = obj.options.address; this.targetInfo.phoneNumber = obj.options.phoneNumber; this.targetInfo.longitude = obj.longitude; this.targetInfo.latitude = obj.latitude; }, // 点击标记点 markertap(e) { console.log(e, '标记点e'); }, // 点击自定义气泡 callouttap(e) { this.checkedId = e.detail.markerId; let markerId = e.detail.markerId; for (let i = 0; i this.markerIndex = i; break; } } if (this.markerIndex != -1) { this.getTargetInfo(this.markers[this.markerIndex]); } else { uni.showToast({ title: '暂未该设备信息', }) } }, // 打开地图导航 openMap() { console.log('uni.getSystemInfoSync().platform', uni.getSystemInfoSync().platform); console.log(this.targetInfo.latitude, this.targetInfo.longitude); // Map.openMap(this.targetInfo.latitude, this.targetInfo.longitude, this.targetInfo.locationName, 'wgs84') var options = { origin: { //导航起点坐标和名称,如果不传则起点为当前位置 latitude: this.latitude, longitude: this.longitude, name: "起点" }, destination: { //导航终点点坐标和名称 latitude: this.targetInfo.latitude, longitude: this.targetInfo.longitude, name: this.targetInfo.locationName }, // #ifdef MP-WEIXIN mapId: "map", // #endif mode: "drive" //导航方式公交：bus驾车：drive（默认）,步行：walk,骑行：bike; } //路线规划 Map.routePlan(options, "gcj02") //驾车导航，打开地图直接开启导航，只需要传入options.destination终点信息 Map.navigation(options, "gcj02") }, // 获取定位信息 getLocationInfo() { uni.getLocation({ type: 'gcj02', //gcj02国测局坐标 success: (res) => { console.log('当前位置的经度：' + res.longitude); console.log('当前位置的纬度：' + res.latitude); this.longitude = res.longitude; this.latitude = res.latitude; this.circles[0].longitude = res.longitude; this.circles[0].latitude = res.latitude; this.ceshi(); } }); }, // 获取定位授权 getAuthorizeInfo(a = "scope.userLocation") { //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗 var _this = this; uni.authorize({ scope: a, success() { //1.1 允许授权 _this.getLocationInfo(); }, fail() { //1.2 拒绝授权 console.log("你拒绝了授权，无法获得周边信息") } }) }, // 查看是否已经授权定位 isGetLocation(a = "scope.userLocation") { // 3. 检查当前是否已经授权访问scope属性， var _this = this; // #ifdef MP uni.getSetting({ success(res) { if (!res.authSetting[a]) { //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置 _this.getAuthorizeInfo() } else { _this.getLocationInfo() } } }); // #endif }, } } .btn { &/deep/.u-btn { width: 148rpx; height: 56rpx; } } @import '@/common/free.css'; @import '@/common/common.css';

【本文地址】

公司简介

联系我们

uniapp 使用map组件 动态自定义标记点图标及内容文字

uniapp 使用map组件动态自定义标记点图标及内容文字