首页 > 其他分享 >uview 腾讯地图城市选择器

uview 腾讯地图城市选择器

时间:2022-11-24 09:55:06浏览次数:45  
标签:province qqmapsdk val uview id result 腾讯 选择器

// 引入SDK核心类
    var QQMapWX = require('@/common/qqmap.js');

    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
        key: 'DIWAZ-OWFC2-MXZUQ-C3WFR-FOOIF-44FGG' // 必填
    });

    let selectCity = {
        data() {
            return {
                //地址选择器
                chooseCity: false,
                columns: [],
                columnData: [],
                lastIndex: 0,
                //地址选择器
            }
        },
        watch: {
            chooseCity(val) {
                if (!(val && !this.columnData.length)) return
                //初始化选择地址
                qqmapsdk.getCityList({
                    success: (province) => { //成功后的回调
                        this.columnData = province.result[0]
                        qqmapsdk.getDistrictByCityId({
                            id: province.result[0][0].id, //对应接口getCityList返回数据的Id,如:北京是'110000'
                            success: (res) => { //成功后的回调
                                this.columns = [
                                    province.result[0].map((val) => val.name),
                                    res.result[0].map((val) => val.name),
                                ]
                            },
                        });
                    },
                });
            },
        },

        methods: {
            changeHandler(e) {
                if (e.indexs[0] == this.lastIndex) return
                this.lastIndex = e.indexs[0]
                qqmapsdk.getDistrictByCityId({
                    id: this.columnData[e.indexs[0]].id, //对应接口getCityList返回数据的Id,如:北京是'110000'
                    success: (res) => { //成功后的回调
                        this.$set(this.columns, 1, res.result[0].map(val => val.name))
                    },
                    fail: function(error) {},
                });
            },
            getCityData() {

            }
        }
    }






    export {
        selectCity
    }
//导入上面的方法
import { selectCity } from '@/common/mixinFunc.js'
//混入
mixins: [selectCity],
//页面添加元素
<u-picker :show="chooseCity" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="chooseCity=false"
            @change="changeHandler"></u-picker>

 

标签:province,qqmapsdk,val,uview,id,result,腾讯,选择器
From: https://www.cnblogs.com/laremehpe/p/16920897.html

相关文章

  • 如何用油猴脚本免费观看如腾讯、爱奇艺、优酷等各大平台VIP视频
    前言目前国内比较火视频平台的视频平台有这么几家:腾讯、爱奇艺、优酷等,对于新剧、热播剧必须开通VIP会员才能观看,各大影视好剧作品分别被争相购买版权后垄断价格,甚至付费......
  • #yyds干货盘点# LeetCode 腾讯精选练习 50 题:删除链表中的节点
    题目:有一个单链表的 head,我们想删除它其中的一个节点 node。给你一个需要删除的节点 node 。你将 无法访问 第一个节点 head。链表的所有值都是唯一的,并且保证给定......
  • 134-腾讯云服务器装Tengine
    第1步:yuminstallgccgcc-c++autoconfautomake出现类似如下错误:Couldnotresolvehost:mirrors.tencentyun.com;Unknownerror百度结果说:我们需要把DNS恢复为......
  • css复合选择器和子元素选择器
    复合选择器:元素1元素2{样式声明}元素1和元素2中间要有空格子元素选择器:元素1>元素2{样式声明}也可以称作亲儿子选择器,选择某元素的最近一级子元素。......
  • 腾讯企业邮箱服务器地址和端口号备忘
    imap/SMTP协议接收邮件服务器:imap.exmail.qq.com,使用SSL,端口号993发送邮件服务器:smtp.exmail.qq.com,使用SSL,端口号465POP3/SMTP协议接收邮件服务器:pop.exmail.qq.com,使......
  • 腾讯云直播踩坑记录
    项目接入腾讯云直播SDK,期间遇到一些问题,记录下来。 U3D打包出的webGL项目。 1.本地测试OK,但是部署到外网后,无法唤起浏览器分享屏幕的弹窗原因:外网服务器没有配置ht......
  • 腾讯开悟“王者荣耀AI开放研究环境”启动申请,为学术研究提供探索平台
    11月21日,腾讯“开悟”平台宣布正式开放“王者荣耀AI开放研究环境”申请,迈出全面开放的第一步。面向非商业用途的机器学习算法研究,“开悟”平台将提供业界独有的高复杂度MOBA......
  • 结构(位置)伪类选择器
    :first-child选取属于其父元素的首个子元素的指定选择器:last-child选取属于其父元素的最后一个子元素的指定选择器:nth-child(n)匹配属于其父元素的第n个子元素,不论元素的类......
  • 腾讯开源的 Fermas ,开源协议有毒
    从Fermas的开源协议来看,商业应用是需要获得商业许可的。https://github.com/polarismesh/femas/blob/develop/LICENSE ......
  • 报告分享|腾讯金融研究院:2022金融AI发展研究报告
    人工智能作为一种“新基建”,正在与实体经济深度融合,推动社会及各个产业的数字化转型、智能升级和融合创新。金融业是人工智能最具潜力的应用领域之一,人工智能技术正与金融业......