当前位置: 首页 > article >正文

uniapp地图基本使用及解决添加markers不生效问题?

uniapp地图使用

App端 通过 nvue 页面实现地图

文章目录

    • uniapp地图使用
      • 效果图
      • template
      • js
        • 添加 marker
        • 使用地图查看位置
        • 移到到当前位置

效果图

在这里插入图片描述


template

<template>
	<view class="mapWrap">
		<!-- #ifdef APP-NVUE -->
		<map class="map-container" id="map" :longitude="location.lng" :latitude="location.lat" 
			:show-location="true" :enable-3D="enable3D" :markers="markers" :include-points="includePoints" @callouttap="oncallouttap">
		</map>
		
		<!-- 定位当前位置 -->
		<cover-view class="myLocation fcc">
			<cover-image class="img" src="@/static/image/icon/currnet_location.png" @click="moveToMyLocation"></cover-image>
		</cover-view>
		<!-- #endif -->
	</view>
</template>

js

添加 marker
使用地图查看位置
移到到当前位置
<script>
    export default {
		data() {
			return {
				location: {
					lng: 114.058279,
					lat: 22.505375
				},
				markers: [],
				includePoints: []
			}
		},
		onLoad() {
			let tmpLocation = this.$store.state.location;
			if (tmpLocation.lng) {
				this.location = tmpLocation;
			}
        },
        onReady() {
		    this.map = uni.createMapContext("map", this);
		},
        methods: {
            getData() {
                // ....
                // 测试数据
                this.dataList = [
					{
						name: "长安街",
						location: {
							lat: 39.907145,
							lng: 116.396651
						}
					},
					{
						name: "天安门",
						location: {
							lat: 39.908823,
							lng: 116.39747
						}
					}
				]
                
                // 添加 marker
                this.addMarkers();
            },
            /**
             * 添加marker
             */
            addMarkers() {
                let markerList = [];
                this.batteryList.forEach((item, index) => {
                    let location = item.location;
                    if (location) {
                        // 直接使用 this.markers.push()方式,无法添加 marker
                        markerList.push({
                            id: Number(index + 1),
                            latitude: Number(location.lat),
                            longitude: Number(location.lng),
                            title: item.name,
                            zIndex: '1',
                            rotate: 0,
                            width: 30,
                            height: 30,
                            anchor: {
                                x: 0.5,
                                y: 1
                            },
                            callout: {
                                content: item.name,
                                color: '#fff',
                                fontSize: 10,
                                borderRadius: 4,
                                borderWidth: 1,
                                borderColor: '#fb6620',
                                bgColor: '#f7b733',
                                padding: '5',
                                display: 'ALWAYS'
                            },
                            iconPath: '/static/image/icon/location01.png'
                        })
                    }
                     this.markers = markerList;
                })
            },
            /**
             * 气泡事件
             */
            oncallouttap(e) {
				const { markerId } = e.detail;
				const marker = this.markers.find((item) => item.id === markerId);
                // 使用地图查看位置
				uni.openLocation({
					latitude: marker.latitude,
					longitude: marker.longitude,
					name: marker.title,
					success: (res) => {
						console.log('success');
					}
				});
			},
            /**
             * 移到到当前位置
             */
			moveToMyLocation() {
                let latitude = this.location.lat;
                let longitude = this.location.lng;
				this.map.moveToLocation({
					latitude,
					longitude,
					success: (res) => {
						this.includePoints = [{
							latitude,
							longitude
						}];
					}
				});
			}
        }
	}
</script>

http://www.kler.cn/a/148700.html

相关文章:

  • Git回到某个分支的某次提交
  • 分享 pdf 转 word 的免费平台
  • 项目风险管理的3大要素
  • 机器学习【激活函数】
  • 论文翻译 | The Capacity for Moral Self-Correction in Large Language Models
  • DOCKER 镜像基础命令
  • Linux shell编程学习笔记31:alias 和 unalias 操作 命令别名
  • 力扣 39. 组合总和 递归解法
  • Linux处理系统常见命令
  • [个人笔记] vCenter6.7使用自建SSL证书
  • UE5 范围内随机生成
  • 1. TiDB-Operator 备份到 Minio
  • RK3566RK3568 安卓11 在framework层进行串口通信
  • 【LeetCode】70. 爬楼梯
  • 服务器运行train.py报错解决
  • 成功的蓝图:实现长期成长与卓越表现的 6 项策略
  • 如何使用ArcGIS实现生态廊道模拟
  • 针对MySql知识的回顾
  • nodejs 如何将 Buffer 数据转为 String
  • 条形码格式
  • 位运算算法【1】
  • UI自动化的基本知识
  • Hive进阶函数:SPACE() 一行炸裂指定行
  • 【栈和队列(1)(逆波兰表达式)】
  • Ps:子路径的上下排列以及对齐与分布
  • 【开发实践】使用POI实现导出带有复杂表头的的excel文件