vue中使用腾讯地图

曾经终败给现在 2022-11-24 14:08 461阅读 0赞

## 最近vue项目中使用腾讯地图选址功能   使用iframe方式引入   不满加载速度过慢，计划重构，不用iframe方式 ##

iframe使用方式如下

html部分

<div class="mymap" v-if="showMap">
      <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=YourMapKey&referer=myapp">
      </iframe>
      <div class="map-close" @click.stop="showMap=false"> 关闭 </div>
    </div>

js部分

mounted() {
      var that = this
        window.addEventListener('message', function (event) {
          var loc = event.data
          if (loc && loc.module == 'locationPicker') {
            console.log('location', loc)
            that.showMap = false
            // do you want do
            // that.companyAddr = loc.poiaddress
          }
        }, false)
    }

css部分

.mymap {
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      .map-close {
        position: fixed;
        z-index: 99999;
        bottom: 30px;
        right: 20px;
        width: 46px;
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
      }
    }

功能页面预览

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RraF8zMjE_size_16_color_FFFFFF_t_70][]

这种方式可以实现功能  
但是加载太慢，重构完之后再来完善这篇文章

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RraF8zMjE_size_16_color_FFFFFF_t_70]: /images/20221124/b7265bfaeeb0430faf4ecfcda1086fec.png

发表评论取消回复

表情：

评论列表（有 0 条评论，461人围观）

还没有评论，来说两句吧...

相关阅读

相关在uniapp H5项目中使用腾讯地图sdk

这个功能我也找了挺多方法的，最后才是这个最靠谱转载至：[https://www.jianshu.com/p/4847480995c9][https_www.jianshu.

Myth丶恋晨/ 2023年01月07日 10:05/ 0 赞/ 998 阅读

相关 uni-app使用腾讯地图

官方文档 > https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview ![在这里插入图片描述][wa

小灰灰/ 2022年12月25日 06:58/ 0 赞/ 431 阅读

相关腾讯地图坐标拾取器

腾讯地图坐标拾取器 [https://lbs.qq.com/tool/getpoint/index.html][https_lbs.qq.com_tool_getpoint_

╰+哭是因爲堅強的太久メ/ 2022年12月02日 13:49/ 0 赞/ 603 阅读

相关腾讯地图去除水印

使用腾讯地图时，在左下角会有令人不爽的水印。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

比眉伴天荒/ 2022年11月26日 08:53/ 0 赞/ 1089 阅读

相关 vue中使用腾讯地图

最近vue项目中使用腾讯地图选址功能使用iframe方式引入不满加载速度过慢，计划重构，不用iframe方式 iframe使用方式如下 html部分

曾经终败给现在/ 2022年11月24日 14:08/ 0 赞/ 462 阅读

相关腾讯地图ip定位

官方url:[https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp][https_lbs.qq.

柔光的暖阳◎/ 2022年11月21日 11:34/ 0 赞/ 592 阅读

相关腾讯地图去除水印

腾讯地图去除水印问题描述解决思路问题描述目前能去掉的是这个水印： ![在这里插入图片描述][20210707105158176.png]

刺骨的言语ヽ痛彻心扉/ 2022年10月13日 12:52/ 0 赞/ 1835 阅读

相关 vue 获取坐标及调用腾讯地图

addrHand() { let that = this console.log(that.jobsUserId) $.

水深无声/ 2022年09月12日 01:43/ 0 赞/ 341 阅读

相关使用腾讯地图驾车规划路线

<!doctype html> <html> <head> <meta charset="utf-8"> <link h

末蓝、/ 2022年05月24日 06:46/ 0 赞/ 768 阅读

相关 vue2.0引入腾讯地图

百度很多东西，然后我没找到腾讯地图在VUE2.0里面的引用。于是根据找的其他地图引用资料进行尝试。步骤如下。首先在src里面建立了TMap.js的文件，内容如下：

柔光的暖阳◎/ 2022年01月31日 11:43/ 0 赞/ 682 阅读