vue 制作的腾讯地图、QQ地图坐标采集器 pc端 手机端

最新推荐文章于 2022-09-30 13:55:34 发布
最新推荐文章于 2022-09-30 13:55:34 发布
阅读量633 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shufan209/article/details/104856517
版权
  • 前言
    -1、腾讯地图官方有相关案例，使用很简单，框架引入和链接跳转两个方式，具体参考官方文档：
    https://lbs.qq.com/tool/component-picker.html
    但是这个案例每次打开都需要设备定位，很慢，而且很多时候打开失败。严重影响我项目的流畅性。
    -2、因此参考官方案例自己写了一个。
    -3、用到vue，vant框架，jq（只用到他的跨域jsonp数据请求），vant，jq用到的东西很少，为了加载更快更快，有兴趣的可以原生js写请求。
  • 一、效果
    在这里插入图片描述
  • 二、key申请
    参考以下文章：
    https://blog.csdn.net/chenwen112/article/details/102910337
  • 三、html框架
<body>
    <div v-cloak="" id="app">
        <van-cell class="search">
            <van-search v-model="pickObj.poiaddress" @input="searchKeyword" @focus="showsuggestion" :show-action="showcancel" placeholder="搜索地点" @cancel="onCancel" />
        </van-cell>
        <div id="container" class="containerOuter">
            <div class="marker">
                <i></i>
                <img :class="{bounceInDown:hasclass}" width="26px" height="36px" src="https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png" />
            </div>
            <!-- 返回当前位置 -->
            <div class="go-back-pos">
                <i></i>
            </div>

            <div id="map-info">
                <!-- 比例尺 -->
                <div class="scale">200米</div>
                <div class="qqmap-text-logo"></div>
            </div>

            <div class="to-right">
                <!-- 缩放按钮 -->
                <a class="cbutton" id="btn-zoom">
                    <i id="btn-zoom-in" class="icon-zoom-in" data-adtag="zoomin">+</i>
                    <i id="btn-zoom-out" class="icon-zoom-out" data-adtag="zoomout">-</i>
                </a>
            </div>
        </div>
        <div v-if="suggestionshow" class="suggestion-wrap">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="searchKeyword">
                <van-cell class="cell_li" clickable v-for="(item,key) in suggestionlist.data" :key="key" @click="pantolocation(key,1)">
                    <div class="poi-title">{{item.title}}</div>
                    <div class="poi-address">{{item.address}}</div>
                </van-cell>
            </van-list>
        </div>
        <div id="info" class="info">
            <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="searchKeyword">
                <van-cell class="info_li" clickable v-for="(item,key) in nearbylist.data" :key="key" @click="pantolocation(key,2)">
                    <div class="info-title">{{item.title}}</div>
                    <div class="info-address">{{item.address}}</div>
                    <i class="active" v-if="getabs([item.location.lat,item.location.lng,pickObj.latlng.lat,pickObj.latlng.lng])" style="display: inline-block;"></i>
                </van-cell>
            </van-list>
        </div>

    </div>
</body>
  • 四、css部分
        [v-cloak] {
            display: none
        }
        
        html {
            font-size: calc(100vw/10)
        }
        
        * ::-webkit-scrollbar {
            display: none;
        }
        
        .__web-inspector-hide-shortcut__ {
            display: none!important;
        }
        
        #app {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }
        
        .search {
            padding: 0;
        }
        
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 45%;
            overflow: hidden;
            box-sizing: border-box;
            border-bottom: 1px solid #d3d3d3;
            border-top: 1px solid #d3d3d3;
        }
        
        #info {
            margin: 0;
            padding: 0;
            width: 100%;
            height: calc(55% - 54px);
            overflow-y: scroll;
            box-sizing: border-box;
        }
        
        #container .marker {
            position: relative;
            top: 50%;
            left: 50%;
            width: 26px;
            height: 36px;
            margin-top: -28px;
            margin-left: -12px;
            z-index: 6
        }
        
        #container .marker img {
            z-index: 1;
            position: absolute
        }
        
        #container .marker i {
            width: 8px;
            height: 8px;
            background: url(https://3gimg.qq.com/lightmap/components/locationPicker2/image/plus.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            bottom: -4px;
            left: 50%;
            margin-left: -4.5px;
            z-index: 0;
            display: none
        }
        
        #container .go-back-pos {
            width: 44px;
            height: 44px;
            position: absolute;
            left: 7px;
            bottom: 7px;
            z-index: 6;
            background: url(https://3gimg.qq.com/lightmap/components/locationPicker2/image/navbg.png) no-repeat top left;
            background-size: 44px 44px
        }
        
        #container .go-back-pos i {
            background: url(https://3gimg.qq.com/lightmap/components/locationPicker2/image/nav.png) no-repeat center center;
            background-size: 24px 24px;
            display: block;
            width: 44px;
            height: 44px
        }
        
        #container #map-info {
            position: absolute;
            left: 58px;
            bottom: 10px;
            z-index: 6;
            width: 46px
        }
        
        #container #map-info .scale {
            font-size: 10px;
            text-align: center;
            position: relative;
            line-height: 1;
            white-space: nowrap;
            padding-bottom: 3px;
            margin-bottom: 21px;
            left: 2px
        }
        
        #container #map-info .scale:before {
            left: -1px;
            right: -1px;
            bottom: -3px;
            border: 3px #fff solid
        }
        
        #container #map-info .scale:after {
            left: 0;
            right: 0;
            bottom: -2px;
            border: 1px #000 solid
        }
        
        #container #map-info .scale:after,
        #container #map-info .scale:before {
            content: '';
            display: block;
            position: absolute;
            height: 3px;
            border-top: 0
        }
        
        #container #map-info .qqmap-text-logo {
            width: 64px;
            height: 16px;
            background: url(https://3gimg.qq.com/lightmap/components/locationPicker2/image/logo.png) no-repeat left top;
            background-size: 64px 16px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 6
        }
        
        #container #map-info .scale {
            text-shadow: #fff 0 -1px, #fff 1px 0, #fff 0 1px, #fff -1px 0
        }
        
        #container .to-right {
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 10;
            width: 40px;
            height: 80px;
            background: #fff;
            border: 1px solid #bababa;
            border-radius: 50px;
            box-shadow: 0 0 6px rgba(0, 0, 0, .1);
            text-align: center;
            font-size: 30px;
            display: none
        }
        
        #container .to-right i {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: block
        }
        
        .suggestion-wrap {
            position: absolute;
            top: 54px;
            bottom: 0;
            z-index: 7;
            width: 100%;
            height: calc(100% - 56px);
            overflow-y: scroll;
            background: #ffffff;
            z-index: 99;
        }
        
        .suggestion-wrap ::-webkit-scrollbar {
            display: none;
        }
        
        .suggestion-wrap .suggestion-scroller {
            width: 100%
        }
        
        .suggestion-wrap .cell_li {
            position: relative;
            display: block;
            padding-top: 8px;
            padding-left: 60px;
            border: none;
            background: url(https://3gimg.qq.com/lightmap/components/locationPicker2/image/search.png) no-repeat 30px 13px;
            background-size: 16px 16px;
            margin-left: -15px;
            height: 58px;
            overflow: hidden
        }
        
        .suggestion-wrap .poi-title {
            font-size: 14px;
            line-height: 27px;
            color: #333;
            font-weight: 400;
            display: block;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden
        }
        
        .suggestion-wrap .poi-address {
            font-size: 12px;
            color: gray;
            height: 20px;
            line-height: 20px;
            margin: 0;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block
        }
        
        #info .info_li {
            position: relative;
            display: block;
            padding-top: 8px;
            border: none;
            height: 58px;
            overflow: hidden;
        }
        
        #info .info_li .active {
            width: 16px;
            height: 16px;
            display: none;
            background: url(https://3gimg.qq.com/lightmap/components/locationPicker2/image/currentPos.png) no-repeat right center;
            background-size: 16px 16px;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -8px
        }
        
        #info .info-title {
            font-size: 14px;
            line-height: 27px;
            color: #333;
            font-weight: 400;
            display: block;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden
        }
        
        #info .info-address {
            font-size: 12px;
            color: gray;
            height: 20px;
            line-height: 20px;
            margin: 0;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
        }
        
        .bounceInDown {
            animation: bounceInDown 500ms infinite;
            animation-direction: alternate;
            -webkit-animation: bounceInDown 500ms infinite;
            -webkit-animation-direction: alternate
        }
        
        .csssprite {
            display: none!important;
        }
        
        @-webkit-keyframes bounceInDown {
            0%,
            60%,
            75%,
            90%,
            to {
                -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
                transition-timing-function: cubic-bezier(.215, .61, .355, 1)
            }
            0%,
            to {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            25% {
                -webkit-transform: translate3d(0, -30px, 0);
                transform: translate3d(0, -10px, 0)
            }
            50% {
                -webkit-transform: translate3d(0, -15px, 0);
                transform: translate3d(0, -20px, 0)
            }
            75% {
                -webkit-transform: translate3d(0, -4px, 0);
                transform: translate3d(0, -10px, 0)
            }
        }
        
        @keyframes bounceInDown {
            0%,
            60%,
            75%,
            90%,
            to {
                -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
                transition-timing-function: cubic-bezier(.215, .61, .355, 1)
            }
            0%,
            to {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            25% {
                -webkit-transform: translate3d(0, -30px, 0);
                transform: translate3d(0, -10px, 0)
            }
            50% {
                -webkit-transform: translate3d(0, -15px, 0);
                transform: translate3d(0, -20px, 0)
            }
            75% {
                -webkit-transform: translate3d(0, -4px, 0);
                transform: translate3d(0, -10px, 0)
            }
        }
shufan209
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue腾讯地图
u011147054的博客
03-30 366
vue腾讯地图 index.html引入腾讯地图 <!-- 引入api --> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script> <!-- 引入这段拓展，以便应用后面Geolocation --> <script type="text/javascript" src="https://3gimg.qq.com/lightmap/c
vue-openlayers实现地图坐标弹框效果
10-14
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
vue获得腾讯坐标拾取器
w2323232323的博客
07-24 948
...
vue使用腾讯地图
weixin_34279579的博客
12-05 2133
1 vue cli 3.x 使用腾讯地图 1. npm安装腾讯地图 腾讯官方并没有在npm上发布腾讯地图插件，所以找到一个别人写的，可以直接调用腾讯地图javascript方法 链接：https://www.npmjs.com/package/qqmap npm install qqmap --save 在组件中引入 import ...
vue3引入腾讯地图根据接口返回在地图上标点案例
一个超爱喝可乐的web前端攻城狮
09-09 591
vue3引入腾讯地图标点
基于Vue的前端PC端设计源码
最新发布
06-01
本源码是基于Vue开发的前端PC端设计，包含408个文件，其中145个.png文件，72个.svg文件，47个.vue文件，41个.js文件，37个.css文件，33个.jpg文件，8个.scss文件，3个.html文件，以及3个.woff和3个.ttf文件。...
腾讯地图小demo（vue）.rar
04-28
通过研究和实践这个项目，开发者不仅可以提升Vue.js和腾讯地图API的使用技能，还能掌握前后端数据交互、用户界面设计和组件化开发等多个方面的能力。对于想要在Web应用中集成地图功能的开发者来说，这是一个宝贵的...
vue使用高德地图根据坐标定位点的实现代码
10-16
主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现PC端分辨率适配操作
10-15
本篇文章将详细介绍如何在Vue项目中实现PC端分辨率适配。 首先，适配的关键在于将设计稿上的像素值转换为相对单位，比如rem，以便根据屏幕大小动态调整元素尺寸。在这里，我们采用阿里团队提出的可伸缩布局方案——...
万能GPS坐标采集神器.zip
11-18
将手机gps通过蓝牙共享给电脑，电脑可使用电子地图定位，也可用于电子海图定位使用，采集手机上的gps 数据
高德、百度、WGS84坐标互换（后羿采集器在线批量转换）
04-30
使用后羿采集器规则，利用线上坐标在线转换网站，批量实现三种坐标之间的转换
腾讯地图坐标拾取器demo
08-31
腾讯地图坐标拾取器demo腾讯地图坐标拾取器demo腾讯地图坐标拾取器demo腾讯地图坐标拾取器demo
Vue3.0中引入地图（谷歌+高德+腾讯+百度）
weixin_44211097的博客
10-04 901
Vue3.0中引入地图（谷歌+高德+腾讯+百度）_氷泠-CSDN博客 以前写的一个博客，vue3引入百度地图组件，后来发现还是有问题，原来现在各个地图对Vue3的适配度不高，发现这篇博客可以 附一个百度地图demo <template> <div class="wrapper"> <div id="container" ></div> <Footer /> </div> </template> <sc
Vue开发腾讯地图坐标拾取器
星爷的博客
03-27 4700
Vue开发的腾讯地图坐标拾取器 大概功能描述：可以按城市及地址模糊查找位置信息，左边是查询结果，右边是地图显示，地图可以点击直接取坐标和地址信息 1、首先去申请一个key，可以在https://lbs.qq.com/这个网站里申请，需要创建一个应用并开通WebServiceAPI 2、在vue中引用腾讯地图，在Index.html文件引入 <script charset="utf-8" src="https://map.qq.com/a.
后台基于elment-dialog展示打卡定位腾讯地图
qq_39899216的博客
12-13 1169
点击list中的查看会弹出dialog展示定位 定位所需要的经度和纬度由后端接口提供，visitedList为展示list，通过$emit(‘showPosition’,{latitude:****,longitude:*****}传递list中从后端获取的经度纬度，并触发打开弹框 在这里插入代码片 <div> <visitedList @showPosition="showPosition" /> </div> <el-dialog .
vue+elementUI如何使用腾讯地图进行开发
weixin_45923100的博客
10-20 4504
腾讯地图官方文档：https://lbs.qq.com/webDemoCenter/glAPI/glMap/mapCenter 1. vue不同普通的html一样直接引入<script></script>就行，而是在vue.js里面要把<script src="https://map.qq.com/api/gljs?v=1.exp&key=你创建的key"></script> 引入public目录里的index.html文件里 2.然后就能在你
vue3.2 setup 腾讯选址组件以及定位当前位置
weixin_44918393的博客
07-05 655
第一步：要在index.html里插入第二步 父组件：在父组件实现当前定位功能，然后点击上报来源，弹出子组件选址。 这里用到了 vant的 van-popup 包裹子组件。 用子组件的ref=LocationSon 去获取子组件暴漏的值，要配合watchEffect 第三步：子组件 先编辑到这，有空了在组织语言 先看代码吧...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9690
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue 天地图 坐标拾取器
08-18
Vue 天地图坐标拾取器是一个基于Vue框架开发的工具，用于在天地图地图上选择和获取地理坐标。它可以帮助用户方便地在地图上选取位置，并提供相应的坐标信息。 该拾取器的主要功能有以下几个方面： 1. 地图展示：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值