vue.js javascript ecmascript vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换

在上一篇实现了侧边栏效果的基础上，引入腾讯地图，实现地图类型切换、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值。

 2.在App.vue文件el-main中添加地图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,

})

},

完整代码：

4.运行项目

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

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

lintOnSave:false, //关闭eslint校验

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

1.地图类型切换

.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.地图视图切换

.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)

}

},

完整代码：

3.运行效果如下：

完结！！！ 

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

参考阅读

 您阅读本篇文章共花了：