uniapp 自定义地图组件(根据经纬度展示地图地理位置)

目录

一、定义组件(pages/compoent/diy/mapDiy.vue)

二、父页面引入子组件


一、定义组件(pages/compoent/diy/mapDiy.vue)

javascript 复制代码
<template>
	<view class="diy-map" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
		<map class="map" :latitude="showParams.latitude" :longitude="showParams.longitude" :style="{height: height}" @click="onClick"></map>
	</view>
</template>

<script>
	export default {
		name: 'mapDiy',
		props: ['showStyle', 'showParams'],
		computed: {
			itemBorderRadius() {
				return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
			},
			height() {
				return uni.upx2px(this.showStyle.height * 2) + 'px';
			},
			paddingTop() {
				return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
			},
			paddingLeft() {
				return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
			},
		},
		methods: {
			// 点击事件
			onClick() {
				uni.openLocation({
					latitude: parseFloat(this.showParams.latitude),
					longitude: parseFloat(this.showParams.longitude),
				});
			}
		}
	}
</script>

<style lang="scss">
	.diy-map .map {
		width: 100%;
	}
</style>

二、父页面引入子组件

  • 写一个按钮获取当前地理位置
html 复制代码
        
       <!-- 获取当前位置按钮 -->
        <button @click="getCurrentLocation">获取当前位置</button>

        <!-- 地图展示区域 -->
        <map-diy v-if="showMap" :showParams="mapParams" :showStyle="mapStyle"></map-diy>
  • 引入组件
javascript 复制代码
import mapDiy from "@/pages/component/diy/mapDiy.vue";
export default {
  components: {
    articleItem,
    mapDiy,
  },
  data() {
    return {
      showMap: false, // 是否显示地图
      mapParams: { latitude: '', longitude: '' }, // 地图的经纬度参数
      mapStyle: { height: 300, background: '#fff', paddingTop: 10,itemBorderRadius: 8 } // 地图样式
    };
  },
methods: {
     // 获取当前位置信息并显示地图
     getCurrentLocation() {
      wx.getLocation({
        type: 'wgs84', // 获取GPS定位的经纬度
        success: (res) => {
          const latitude = res.latitude;
          const longitude = res.longitude;

          // 更新地图参数并显示地图
          this.mapParams = { latitude, longitude };
          this.showMap = true; // 显示地图
        },
        fail: (error) => {
          wx.showToast({
            title: '无法获取位置,请检查权限',
            icon: 'none'
          });
        }
      });
    },
相关推荐
Hilaku12 分钟前
“全栈”正在淘汰“前端”吗?一个前端专家的焦虑与思考
前端·面试·程序员
前端大卫16 分钟前
页面加载太慢?一文搞懂 JS 和 CSS 阻塞机制!
前端·javascript
十步杀一人_千里不留行20 分钟前
I Built an Offline-Capable App by Myself: React Native Frontend, C# Backend
前端·react native·typescript
SoaringHeart1 小时前
Flutter小技巧:IM音浪效果实现
前端·flutter
小old弟1 小时前
亲测autojs自动化,关闭应用的三种方法
前端
AndyLaw1 小时前
我用 ChatGPT 起手、脚本改造,给孩子做了一个绘本
前端·javascript·openai
放空欧巴1 小时前
学习 elpis 有感 -- 初识 elpis-core (实现简易版 Egg.js)
前端
前端开发呀1 小时前
震惊!开启浏览器翻译竟会导致react应用报错?
前端·react.js
Sun_light1 小时前
从 0 到 1 实现低代码编辑器的基本功能
前端·react.js·typescript