vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换

最新推荐文章于 2025-03-22 11:43:05 发布
最新推荐文章于 2025-03-22 11:43:05 发布
阅读量2.3k 收藏 16
点赞数 11
分类专栏： vue2 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/im_api/article/details/129199893
版权

在上一篇实现了侧边栏效果的基础上，引入腾讯地图，实现地图类型切换、2D、3D视图切换

效果如下：

 

一、使用腾讯位置服务

1.官网

腾讯位置服务 - 立足生态，连接未来

2.注册 登录

注册账号--->登录控制台

3.创建应用 

应用管理--->我的应用--->创建应用--->填写应用名称，选择应用类型

例如：应用名称：maptest

           应用类型：其他        

 4.添加key到「maptest」应用

填写Key名称--->描述--->勾选webServiceAPI--->添加

 获取到应用的Key

二、在项目中引入地图

1.使用Visual Studio Code打开上篇中的项目demo,在public文件夹下，index.html添加script标签加载API服务，其中将YOUR_KEY替换为你自己创建的应用Key值。

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

 2.在App.vue文件el-main中添加地图div容器，样式。

<div id="mapcontainer"></div>
#mapcontainer{
    width: 100%;
    height: calc(100vh - 120px);
  }

3.初始化地图

initmap(){
      let center = new TMap.LatLng(24.874785,102.710112);
      this.tMap = new TMap.Map('mapcontainer',{
        zoom:10,
        center:center,
      })
    },

完整代码：

<template>
  <div id="app">
    <el-container class="container">
      <el-header>Header</el-header>
      <el-container>
        <el-aside class="aside_main" :class="{aside_main_show:!asideStatus}">Aside</el-aside>
        <el-container>
          <el-main class="main_cont">
            <!-- aside侧边栏按钮 -->
            <div class="aside_open_close" @click="asidechange">
              <i class="el-icon-arrow-left" v-if="aside_open_close"></i>
              <i class="el-icon-arrow-right" v-else></i>
            </div>
            <!-- 地图容器 -->
            <div id="mapcontainer"></div>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
  </el-container>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data(){
    return{
      asideStatus:false,
      aside_open_close:false,
      tMap:null,//腾讯地图实例

    }
  },
  mounted(){
    // 初始化地图
    this.initmap();
  },
  methods:{
    // 侧边栏收缩与展开
    asidechange(){
      this.asideStatus = !this.asideStatus
      
      if(this.asideStatus){
        setTimeout(()=>{
          this.aside_open_close =true
        },500)
      }else{
        setTimeout(()=>{
          this.aside_open_close =false
        },500)
      }
    },
    initmap(){
      let center = new TMap.LatLng(24.874785,102.710112);
      this.tMap = new TMap.Map('mapcontainer',{
        zoom:10,
        center:center,
      })
    },
  }
}
</script>

<style>
.container{
  height: 100%;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  /* .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  } */

  /* 侧边栏样式 */
  .aside_main{
    width: 200px !important;
    transition: width 0.5s;
  }
  .aside_main_show{
    width: 0px !important;
  }
  /* .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  } */
  .main_cont{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #E9EEF3;

  }
  /* 侧边栏按钮样式 */
  .aside_open_close{
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    background-color: #2A333A;
    border-radius: 0 6px 6px 0;
    font-size: 20px;
    z-index: 1000;
    cursor: pointer;
  }
  .aside_open_close:hover{
    background-color: #FF8E2B;
    color: #fff;
  }
  #mapcontainer{
    width: 100%;
    height: calc(100vh - 120px);
  }
</style>

4.运行项目

此时发现出现错误提示！！！

 在vue.config.js文件添加配置，重新运行即可

lintOnSave:false, //关闭eslint校验

 

三、实现地图类型切换、2D、3D视图切换

1.地图类型切换

<div class="btncontainerLeft">
     <el-radio-group v-model="radio1" size="mini" @input="changebasemap">
         <el-radio-button label="地图"></el-radio-button>
         <el-radio-button label="卫星"></el-radio-button>
      </el-radio-group>
</div>

 

.btncontainerLeft{
    position: absolute;
    left: 30px;
    top: 10px;
    z-index: 10000;
  }
changebasemap(e){
   if(e == '地图'){
      this.tMap.setBaseMap({type:'vector'})
   }else if(e == '卫星'){
      this.tMap.setBaseMap({type:'satellite'})
   }
},

2.地图视图切换

<div class="btncontainerRight">
     <el-radio-group v-model="radio2" size="mini" @input="changeviewmode">
         <el-radio-button label="2D"></el-radio-button>
         <el-radio-button label="3D"></el-radio-button>
     </el-radio-group>
</div>
.btncontainerRight{
    position: absolute;
    right: 100px;
    top: 10px;
    z-index: 10000;
  }
changeviewmode(el){
   if(el == '2D'){
     this.tMap.setViewMode('2D')
   }else if(el == '3D'){
     this.tMap.setViewMode('3D')
     this.tMap.setPitch(70)
   }
},

完整代码：

<template>
  <div id="app">
    <el-container class="container">
      <el-header>Header</el-header>
      <el-container>
        <el-aside class="aside_main" :class="{aside_main_show:!asideStatus}">Aside</el-aside>
        <el-container>
          <el-main class="main_cont">
            <!-- aside侧边栏按钮 -->
            <div class="aside_open_close" @click="asidechange">
              <i class="el-icon-arrow-left" v-if="aside_open_close"></i>
              <i class="el-icon-arrow-right" v-else></i>
            </div>
            <!-- 地图容器 -->
            <div id="mapcontainer"></div>
            <!-- 地图类型切换 -->
            <div class="btncontainerLeft">
              <el-radio-group v-model="radio1" size="mini" @input="changebasemap">
                <el-radio-button label="地图"></el-radio-button>
                <el-radio-button label="卫星"></el-radio-button>
              </el-radio-group>
            </div>
            <!-- 地图视图切换 -->
            <div class="btncontainerRight">
              <el-radio-group v-model="radio2" size="mini" @input="changeviewmode">
                <el-radio-button label="2D"></el-radio-button>
                <el-radio-button label="3D"></el-radio-button>
              </el-radio-group>
            </div>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
  </el-container>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data(){
    return{
      asideStatus:false,
      aside_open_close:false,
      tMap:null,//腾讯地图实例
      radio1:'地图',
      radio2:'2D'

    }
  },
  mounted(){
    // 初始化地图
    this.initmap();
  },
  methods:{
    // 侧边栏收缩与展开
    asidechange(){
      this.asideStatus = !this.asideStatus
      
      if(this.asideStatus){
        setTimeout(()=>{
          this.aside_open_close =true
        },500)
      }else{
        setTimeout(()=>{
          this.aside_open_close =false
        },500)
      }
    },
    initmap(){
      let center = new TMap.LatLng(24.874785,102.710112);
      this.tMap = new TMap.Map('mapcontainer',{
        zoom:10,
        center:center,
      })
    },
    // 切换地图底图类型
    changebasemap(e){
      if(e == '地图'){
        this.tMap.setBaseMap({type:'vector'})
      }else if(e == '卫星'){
        this.tMap.setBaseMap({type:'satellite'})
      }
    },
    // 切换地图2D/3D视图
    changeviewmode(el){
      if(el == '2D'){
        this.tMap.setViewMode('2D')
      }else if(el == '3D'){
        this.tMap.setViewMode('3D')
        this.tMap.setPitch(70)
      }
    },
  }
}
</script>

<style>
.container{
  height: 100%;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  /* .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  } */

  /* 侧边栏样式 */
  .aside_main{
    width: 200px !important;
    transition: width 0.5s;
  }
  .aside_main_show{
    width: 0px !important;
  }
  /* .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  } */
  .main_cont{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #E9EEF3;

  }
  /* 侧边栏按钮样式 */
  .aside_open_close{
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    background-color: #2A333A;
    border-radius: 0 6px 6px 0;
    font-size: 20px;
    z-index: 10000;
    cursor: pointer;
  }
  .aside_open_close:hover{
    background-color: #FF8E2B;
    color: #fff;
  }
  #mapcontainer{
    width: 100%;
    height: calc(100vh - 120px);
  }
  .btncontainerLeft{
    position: absolute;
    left: 30px;
    top: 10px;
    z-index: 10000;
  }
  .btncontainerRight{
    position: absolute;
    right: 100px;
    top: 10px;
    z-index: 10000;
  }
</style>

3.运行效果如下：

完结！！！ 

源码地址https://download.csdn.net/download/im_api/87495549

前端在vue2中嵌入腾讯地图（web端）
zzzdnb的博客
12-25 4714
前端在vue中使用腾讯地图完成 （地图的展示、定位、 标点、 给点添加点击事件、 打开标点的信息窗口）功能
使用vue+腾讯地图API GL实现地图选房的功能
qq_541630130的博客
06-24 1713
使用vue+腾讯地图API GL实现地图选房的功能 背景介绍 公司最近想做一个地图选房的功能，在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能 腾讯地图的官方文档.首先我们要确定好使用的API，本人就在这方面被坑了，官方API的地图缩放级别最大是10km 但是由于需要用户选择房间 所以会导致最大的缩放级别也不能满足需求，只有通过公司和腾讯那边商量改腾讯地图API最大缩放级别的比例尺范围,这个一定要在前期做好以后确认腾讯给改的是哪个API，本人就一开始使用的javascript
Vue2使用腾讯地图实现：输入起始点规划路线（运用地址解析）
silver577的博客
05-08 1172
（ps:utils是我创的文件夹，放别的文件夹时在main.js引入记得改路径）（文件路径：public\index.html）（文件路径：src\utils\cb.js）（文件路径：src\main.js）（ps：记得把key替换成自己的）（ps:记得替换成自己的key）（ps：样式这里没贴完整）
vue3 调用腾讯地图
最新发布
m0_46068617的博客
03-22 267
在vue的 index.html 添加如下代码。2 然后安装 vue-jsonp。
Vue2使用-腾讯地图
m0_46796399的博客
08-16 999
腾讯地图 + vue-jsonp的使用（地图中通过经纬度添加标点）
Vue2中实现地图选点功能（腾讯地图）
Anorry的博客
03-25 3068
最近的项目中，涉及到了需要地图选点的功能，要获取选中点的经纬度，所以就此写下该文章记录一下，以便后面自己或需要的人查阅我的项目是 使用开发的后台管理项目，用的地图是。
vue2引入腾讯地图搜索或者点击，获取经纬度，信息
HGH3142147285的博客
11-28 1266
先在你的vue文件的public里面的index.html加上这段代码，改成你自己的key。WebService API | 腾讯位置服务。下面的是我的方法你们按照自己的需求改。这个是对话框，两个绑定事件。
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换demo
02-24
在本文中，我们将深入探讨如何在Vue2项目中引入腾讯地图，并实现地图类型切换以及2D和3D视图的自由切换。这是一个重要的技术实践，对于构建地理信息系统或需要地图功能的Web应用来说非常关键。 首先，让我们了解...
Vue2实现腾讯地图类型及2D/3D视图切换教程
资源摘要信息:"在本节中，我们将详细探讨如何在Vue2项目中引入腾讯地图，并实现地图类型的切换以及2D和3D视图的切换功能。这将涉及对Vue2框架的理解，以及如何通过API调用与腾讯地图进行交互。" 知识点一：Vue2框架...
Vite Vue3引入腾讯地图
02-15
### 集成腾讯地图API至Vite与Vue3项目 #### 准备工作 ...以上代码片段实现了基本的地图渲染功能，并设置了初始视图中心点位置。对于更复杂的应用场景，则可以根据需求进一步增强该模块的功能特性。
基于Vue的JavaScript API GL 腾讯地图 组件
WoSNBBCSDN的博客
05-23 1398
需求是在网页上撸个地图，npm上的qqmap莫名其妙的白图，然后我就懵逼了，然后去看了一眼； 产品通知 街景API 将在 2020-04-22 停止新用户接入，文档同步下线，已接入用户不受影响。 （涉及命名空间：qq.maps.Panorama） 服务类API 将在 2020-04-22 停止新用户接入，文档同步下线，已接入用户不受影响，新用户请使用功能更为丰富的 WebServiceAPI （涉及命名空间：qq.map
vue2中使用腾讯地图
一直记录
02-10 1431
);// 定义地图中心点坐标 const center = new window . TMap . LatLng(37.464594 , 121.447867);// 定义map变量，调用 TMap.Map() 构造函数创建地图 const map = new window . TMap . Map(document . getElementById('map') , {
vue2.0引用腾讯地图
Longines____的博客
10-14 1205
开始注册腾讯位置服务账号vue引入js创建map.vue显示结果 注册腾讯位置服务账号 入门指南 vue引入js 项目根目录下的index.html里引入 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourKey"></script> 创建map.vue <templ...
vue接入腾讯地图
qq_30110433的博客
12-13 1876
没有使用vue的组件，以下的代码是根据腾讯地图开放平台的实例进行编写。
vue2使用腾讯地图总结
qq_45345383的博客
12-04 2143
新建 在 src/utils文件下新建 txMap.js。在index.html页面添加，在页面就可以直接使用。参数具体使用看 参考手册(很详细)（基础的覆盖物和基础参数）
Vue引入腾讯地图（搜索获取定位）
sinat_41273766的博客
06-09 9491
2.进入控制台，点击左侧菜单应用管理—我的应用，点击右上方创建应用，填写内容如下。以Vue项目为例，在index.html文件中添加。WebServiceAPI里根据自己的情况填写。保存后显示刚刚的应用即可使用腾讯地图。新建map.vue 腾讯地图组件。
在vue中使用腾讯地图
记录点滴
12-06 5591
最近在做公司后台ERP系统时，用到了腾讯地图，遇到了不少坑，在这里记录下： 用到了几个主要知识点先说下： 1、单例的设计思想（在判断是否有map实例那块） 2、对象深度克隆 （创建门店那块） 3、this指向问题 （有很多，自己看） 引入 qqmap 腾讯官方未提供通过npm插件方式来安装腾讯地图，还好有大佬写了一个： https://www.npmjs.com/package...
vue项目中使用腾讯地图(1.地图显示)
z980498059的博客
07-11 2876
腾讯地图文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic。1.2服务控制台 ——应用管理——我的应用——创建应用——主要需要用到key。2.在index.html文件中引入腾讯地图。在页面中定义地图显示容器。//设置地图中心点坐标。2.1 创建地图组件。//设置地图缩放级别。
VUE接入腾讯地图
weixin_46288115的博客
06-06 5296
vue接入腾讯地图(一)【点击事件】 - 腾讯位置服务 -
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值