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

最新推荐文章于 2024-03-29 16:37:44 发布
最新推荐文章于 2024-03-29 16:37:44 发布
阅读量1.5k 收藏 9
点赞数 7
分类专栏： 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

im_api
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue引入maptalks地图及聚合效果的实现
10-14
主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 引入AMap高德地图的实现代码
10-17
主要介绍了Vue 引入AMap高德地图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue使用腾讯地图
最新发布
GDNLQ的博客
03-29 584
先来展示效果图（输入框、文字就不管了自己写就行）
在vue中高德地图引入和轨迹的绘制的实现
01-21
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: ‘********************',//自己在高德地图平台上的key值 plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scal
Vue2-腾讯地图--地图展示
前端叶荨，随手记
04-16 407
Vue2腾讯地图------地图展示。
前端在vue2中嵌入腾讯地图（web端）
zzzdnb的博客
12-25 4039
前端在vue中使用腾讯地图完成 （地图的展示、定位、 标点、 给点添加点击事件、 打开标点的信息窗口）功能
Vue引入腾讯地图（搜索获取定位）
sinat_41273766的博客
06-09 5359
2.进入控制台，点击左侧菜单应用管理—我的应用，点击右上方创建应用，填写内容如下。以Vue项目为例，在index.html文件中添加。WebServiceAPI里根据自己的情况填写。保存后显示刚刚的应用即可使用腾讯地图。新建map.vue 腾讯地图组件。
vue2使用腾讯地图总结
qq_45345383的博客
12-04 1207
新建 在 src/utils文件下新建 txMap.js。在index.html页面添加，在页面就可以直接使用。参数具体使用看 参考手册(很详细)（基础的覆盖物和基础参数）
vue项目中使用腾讯地图(1.地图显示)
z980498059的博客
07-11 2318
腾讯地图文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic。1.2服务控制台 ——应用管理——我的应用——创建应用——主要需要用到key。2.在index.html文件中引入腾讯地图。在页面中定义地图显示容器。//设置地图中心点坐标。2.1 创建地图组件。//设置地图缩放级别。
vue - vue使用腾讯api进行定位获取，绘制地图、标点、搜索、路线规划
qq_43886365的博客
03-10 1万+
vue使用腾讯地图api进行定位获取，绘制地图、标点、搜索、路线规划
vue+vuex实现2D可视化图形编辑器
CodingNoob
08-30 5006
随着物联网的快速发展，人们对物联网设备的数据监控可视化的需求越来越强烈，为了解决企业设备数据监控可视化痛点，当康科技经过不断的努力，研发了一套基于物联网的可视化图形编辑器，用户编辑器可以通过该编辑器实现自定义上传图片，和自己所需的组件图标，通过拖拽，移动等方式编辑对应的可视化图形界面，动态绑定设备数据，实现系统组态数据显示。微信公众号 搜索“当康AIOT”，即可关注我们。6、针对不同的设备类型不同的数据绑定。北方供暖锅炉房可视化。...............
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换demo
02-24
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue2.0引用腾讯地图
Longines____的博客
10-14 974
开始注册腾讯位置服务账号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...
VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）
m0_59382352的博客
05-08 1259
代码如下 复制粘贴即可。
Vue - 超详细网站接入腾讯地图的完整流程，提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例（可一键复制并运行的功能源代码，详细的注释及常见问题汇总）Nuxt.js 也能用！
王佳斌
03-17 2010
vue H5 网页引入腾讯地图详细教程，vue nuxt 引入腾讯地图，vue公众号H5网站如何植入腾讯地图，vueH5平台腾讯地图配置及使用详细教程，vueH5 植入腾讯地图SDK，vueH5公众号项目怎么用腾讯地图，vue nuxt H5网页IP属地定位，获取当前用户位置名称，vue h5网站如何使用腾讯地图获取用户的定位位置，vue H5腾讯地图怎么接入，vue H5项目中使用腾讯地图sdk，vue中使用腾讯地图，vueH5网站集成腾讯地图功能，vue通过ip获取其地址、经纬度、详细地址，vue调用腾
vue2中使用腾讯地图
一直记录
02-10 995
);// 定义地图中心点坐标 const center = new window . TMap . LatLng(37.464594 , 121.447867);// 定义map变量，调用 TMap.Map() 构造函数创建地图 const map = new window . TMap . Map(document . getElementById('map') , {
记录在Vue项目里面使用腾讯地图
热门推荐
m0_60835161的博客
03-29 1万+
Vue使用腾讯地图
vue接入腾讯地图
qq_30110433的博客
12-13 1273
没有使用vue的组件，以下的代码是根据腾讯地图开放平台的实例进行编写。
高德地图 vue 切换2d 3d
05-16
高德地图的 JavaScript API 提供了 `AMap.Map` 类来创建地图实例。在创建地图实例时，可以通过传递不同的参数来设置地图的属性，包括视觉效果模式。 要在 Vue 应用程序中使用高德地图，可以将 `AMap.Map` 类封装成 Vue 组件。以下是一个简单的例子： ```html <template> <div id="map-container"> <div ref="map" style="width: 100%; height: 100%;"></div> <div class="switch-btn" @click="toggleMode">{{ modeText }}</div> </div> </template> <script> export default { data() { return { mode: '2D', }; }, mounted() { this.initMap(); }, methods: { initMap() { // 创建地图实例 this.map = new AMap.Map(this.$refs.map, { zoom: 16, center: [116.397428, 39.90923], viewMode: '3D', // 默认为 3D 视觉效果模式 }); }, toggleMode() { // 切换视觉效果模式 this.mode = this.mode === '2D' ? '3D' : '2D'; this.map.setFeatures(this.mode === '2D' ? ['road', 'building'] : ['road', 'building', 'satellite']); }, }, computed: { modeText() { return this.mode === '2D' ? '切换到 3D' : '切换到 2D'; }, }, }; </script> <style> #map-container { position: relative; width: 100%; height: 100vh; } .switch-btn { position: absolute; top: 10px; right: 10px; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; } </style> ``` 在上面的代码中，我们创建了一个地图容器和一个切换按钮。初始时，地图使用 3D 视觉效果模式。当用户点击切换按钮时，我们会切换到 2D 视觉效果模式，并将地图的图层设置为只显示道路和建筑物。如果用户再次点击切换按钮，则会切换回 3D 视觉效果模式，并将地图的图层设置为显示卫星图像、道路和建筑物。 需要注意的是，在 Vue 应用程序中使用高德地图时，需要在 `mounted` 钩子函数中初始化地图，因为只有在组件挂载到 DOM 中之后，才能正确地获取容器元素的引用。同时，为了防止内存泄漏，需要在组件销毁时销毁地图实例。可以在 `beforeDestroy` 钩子函数中调用 `AMap.Map` 类的 `destroy` 方法来完成销毁操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值