vue-cli3项目使用天地图

天地图就不介绍了，想要了解的可以自行百度，相信如果要用到天地图的话也大概了解了天地图是干什么用的了，与腾讯地图百度地图相比，天地图有着明显的优点，比如说：囊括的范围比较广，天地图由于是国家政府所支持的服务，所以，对于一些偏远地区的地图也能非常清楚的获取和查看；话不多说，先看看基本的用法吧！

使用天地图主要有三大步骤：

• 在项目的index.html使用<script>标签引入天地图的js类
• 在页面新建一个承载地图的容器
• 把已经注册在window上的地图类进行配置，从而实现地图的显示

1.在项目的index.html使用<script>标签引入天地图的js类

在vue项目的public/index.html下引入文件：

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

tips:密钥需要注册申请，按照使用接口次数申请为个人开发者或者企业开发者

2.新建一个承载地图的容器

<template>
    <div class="home">
        <div id="mapContainer" class="map-container" ref="mapContainer"></div>
    </div>
</template>

3.配置地图类，显示地图

初始化地图对象

init(){
    // 通过Promise来保证在使用地图类时已经注册在window上了
    return new Promise((resolve,reject) => {
        if(typeof window.T !== 'undefined'){
            resolve(window.T);
            return true
        }
        window.onload = () => {
            resolve(window.T)
        }
    })
}

绘制地图

 drawMap(){
    this.init().then(T => {
        this.T = T;
        this.map = new T.Map(this.$refs.mapContainer);
        this.map.centerAndZoom(new T.LngLat(116.112230,24.304730), this.zoom); // 设置地图中心点个缩放级别
    })
}

到这就可以在页面上看到地图了

就是这么简单。 示例项目已经上传至github，有需要的可自行查看或者fork。

https://github.com/GranzonLin/vue-map.git

后续更新如何在地图上标点及点标注