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'
          });
        }
      });
    },
相关推荐
江城开朗的豌豆3 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼13 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子15 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆16 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了16 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆21 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆22 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆23 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆23 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er30 分钟前
【前端工程化】前端组件模版构建那些事
前端