开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 12880|回复: 0
收起左侧

[技术分享] uniapp 插件 自定义地图组件mi-map

[复制链接]
发表于 2021-11-12 17:15:48 | 显示全部楼层 |阅读模式   广东省揭阳市
代码简单,易用。如页面样式不符合项目需求,可直接修改源码


[JavaScript] 纯文本查看 复制代码
<template>
    <view class="content">
        <button type="primary" @tap="openMap">点击选择地址</button>
        <view class="address">
            <view class="">纬度:{{positionObj.latitude}}</view>
            <view class="">经度:{{positionObj.longitude}}</view>
            <view class="">具体地址:{{positionObj.address}}</view>
        </view>

        <mi-map 
            v-if="mapShow"
            ref="miMap"
            tipText="mi-Map"
            @updateAddress="updateAddress"
        >
        </mi-map>
    </view>
</template>
<!-- 此处缺<script>包裹 由于未知原因,markdown文件上传到组件库里就没了~ -->
<script>
    import miMap from '../../components/mi-map/mi-map.vue'
    export default {
        components: {miMap},
        data() {
            return {
                mapShow: false,
                positionObj: {},
            }
        },
        methods: {
            // 打开地图
            openMap() {
                this.mapShow = true
            },
            // 更新地址并关闭地图
            updateAddress(addressObj) {
                this.mapShow = false
                this.positionObj = addressObj
            },
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .address{
        margin-top: 1rem;
    }
</style>


插件市场地址: https://ext.dcloud.net.cn/plugin?id=1448

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表