vue项目中使用天地图

1.首先打开天地图注册账号 申请自己所用的key
网址：http://lbs.tianditu.gov.cn/home.html

2.创建自己的vue项目，这里就不说了

3.将

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>

引入到你项目中的index.html文件中

4.创建map.vue文件

<template>
    <div>
        <div id="mapDiv"></div>
        <!-- <button @click = "open">点击画多边形</button> -->
    </div>
</template>
<script>
    export default {
        data(){
            return{     
        }     
    },
    created(){
        
    },
    mounted(){
        this.loadmap()
    },
    methods:{
       loadmap(){
            var map = new T.Map("mapDiv");
        //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.94940), 12);
            //允许鼠标双击放大地图
            map.enableScrollWheelZoom();
       }
    }
}
</script>
<style scoped>
    #mapDiv {
        height: 100vh;
        width: 100%;
    }
</style>

这样天地图就可以简单的显示出来了

接下来就要实现一些简单的功能

①实现图层的覆盖 比如说 你想要的 卫星图层 微型混合图层 地形图

 var ctrl = new T.Control.MapType();
//添加控件
 map.addControl(ctrl)

这里是加了 一个控件 点击 可以实现 图层的切换
你如果只想要单独的图层 就用下面的
下来 就不多说了 都比较简单 有什么问题 评论留言给我