天地图基础篇《一》当前互联网快速发展，前端技术也是日新月异的变化，其中H5和Vue是前端开发中非常流行的技术框架，本文以

天地图API地址：<http://lbs.tianditu.gov.cn/api/js4.0/class.html>
天地图实例参考地址：<http://lbs.tianditu.gov.cn/api/js4.0/examples.html>

当前互联网快速发展，前端技术也是日新月异的变化，其中H5和Vue是前端开发中非常流行的技术框架，本文以这两种框架为例：

天地图JavaScript API 4.0支持HTTP和HTTPS，免费对外开放，可直接使用。使用API之前，需要申请应用Key点击该链接注册账号并申请KEY:

https://sso.tianditu.gov.cn/login?service=https%3A%2F%2Fconsole.tianditu.gov.cn

点击控制台：点击创建新应用：根据自己的需求创建

创建后即可看到自己申请的KEY

1、H5引用天地图

地图API是由JavaScript语言编写的，您在使用之前需要通过

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

一.准备页面

根据HTML 标准，每一份HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5 规范的文档声明：

  <!DOCTYPE html>

二、引入天地图JavaScript API文件

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

三、创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。将div元素的宽和高分别设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。

四、创建地图实例

   //初始化地图对象
   var map=new T.Map('mapDiv');

五、确定经纬度坐标

     var lnglat = new T.LngLat(116.40969,39.89945)

这里我们使用T命名空间下的T.Lnglat类来创建一个坐标点。T.Lnglat类描述了一个地理坐标点，其中116.40969表示经度，39.89945表示纬度。

六、地图初始化

  map.centerAndZoom(lnglat,12);

在创建地图实例后，我们需要对其进行初始化，map.centerAndZoom方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

七、完整代码

   <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>HELLO WORLD</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
<script>
    var map;
    var zoom = 12;
    function onLoad() {
        map = new T.Map('mapDiv');
        map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
    }
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:500px; height:400px"></div>
</body>
</html>

2、VUE中引入天地图（建议使用方式二）

方法一：加载天地图，引用：public/index.html

同H5中引入相同

     <template>   <!--创建地图容器元素-->
         <div id="tdtMapDivID" class="divTdtMap"></div> 
    </template> 
   <script> 
       export default {
       name: 'TdtMap',
       data() {
          return {
            tdtMap: {}
          }; 
       },
       created() { },
        mounted() {
       // 初始化天地图
       this.initTdtMap();
       },
       watch: {},
       methods: {
       // 初始化天地图
       initTdtMap() {
       let T = window.T;
       this.tdtMap = new T.Map(this.tdtMapDivID);
       //设置显示地图的中心点和级别
       this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
       // 5.创建地图类型控件
       const ctrl = new T.Control.MapType([{
       title: '地图',
       icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', 
       //地图控件上所要显示的图层图标（默认图标大小80x80）
       layer: window.TMAP_NORMAL_MAP
       }, {
       title: '卫星',
       icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
       layer: window.TMAP_SATELLITE_MAP
       }]);
       // 6.将控件添加到地图，一个控件实例只能向地图中添加一次。
       this.tdtMap.addControl(ctrl);
       // 7.创建坐标，通常是调取接口获得经纬度 
       const point = new T.LngLat(112.9388, 28.2280); 
       // 8.创建覆盖使用的图标
       const icon = new T.Icon({
       iconUrl: '../marker-red.png',
       iconSize: new T.Point(27, 27),
       iconAnchor: new T.Point(10, 25)
       });
       // 9. 创建在该坐标上的一个图像标注实例
       const marker = new T.Marker(point, icon);
       // 10.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
       this.tdtMap.addOverLay(marker);
       }
       }
       }; </script>
  <style scoped>
     .divTdtMap {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 80vh;
      z-index: 0;
      }
</style>

方式2、异步加载外部js（该方式亲测可用）

新建工具类

/**
 * loadJS 异步加载远程JS
 * @constructor
 * @param {string} src - 必填，需要加载的URL路径
 * @param {string} keyName - 必填，唯一key和JS返回的全局的对象名
 * @param {string} callbackName - 非必填，如果远程JS有callback，则可更有效的判断是否完成加载
 */
export function loadJS (src, keyName, callbackName) {
return new Promise((resolve, reject) => {
  let has = document.head.querySelector("script[loadKey="+keyName+"]")
  if(has){
     return resolve(window[keyName])
  }
  let script = document.createElement("script")
  script.type = "text/javascript"
  script.src = src
  script.setAttribute("loadKey", keyName)
  document.head.appendChild(script)
  script.onload = () => {
     if(callbackName){
        window[callbackName] = () => {
           return resolve(window[keyName])
        }
     }else{
        setTimeout(()=>{
           return resolve(window[keyName])
        },50)
     }
  }
  script.onerror = (err) => {
     return reject(err)
  }
})
}

  /**
* loadCSS 异步加载远程css
 * @constructor
 * @param {string} src - 必填，需要加载的URL路径
 * @param {string} keyName - 必填，唯一key
 */
export function loadCSS (src, keyName) {
return new Promise((resolve, reject) => {
  let has = document.head.querySelector("link[loadKey="+keyName+"]")
  if(has){
     return resolve()
  }
  let link = document.createElement('link')
  link.rel = "stylesheet"
  link.href = src
  link.setAttribute("loadKey", keyName)
  document.head.appendChild(link)
  link.onload = () => {
     return resolve()
  }
  link.onerror = (err) => {
     return reject(err)
  }
})
}

调用示例

<template>
  <el-container>
     <el-header>
        <div class="left-panel">
           <el-button type="primary" icon="el-icon-plus"></el-button>
           <el-button type="danger" plain icon="el-icon-delete"></el-button>
        </div>
        <div class="right-panel">
           <div class="right-panel-search">
              <el-input   placeholder="关键词" clearable></el-input>
              <el-button type="primary" icon="el-icon-search" @click="map_search"></el-button>
           </div>
        </div>
     </el-header>
     <el-main class="nopadding">
        <div style="width: 100%;height: 100%;" id="container"></div>
     </el-main>
  </el-container>
</template>

<script>
import { loadJS } from '@/utils/load'

export default {
  name: 'loadJS',
  data() {
     return {

     }
  },
  mounted() {
     this.init()
  },
  methods: {
     async init(){

        //loadJS (src, keyName, callbackName)
        //src        必填，需要加载的URL路径
        //keyName     必填，有2个作用，作为唯一KEY防止N次插入DOM；作为JS返回对象的key名，类似百度地图的BMapGL，如果没有则返回null
        //callbackName     非必填，如果远程JS有callback，填写callback方法名称。
        //loadJS返回Promise，如果全局对象eslint发出警告 需要//eslint-disable-next-line，暂时关闭警告行
        //                                                                   ╭───这两个字符串要一致───╮
        //var TMapGL = await loadJS(`//api.tianditu.gov.cn/api?v=4.0&tk==${tk}`, "TMapGL")
        //像BMapGLLib就没有callback，无需第3个参数
           await loadJS("//api.tianditu.gov.cn/api?v=4.0&tk=76ea439b34ffe99b15e4d44adb9c89b0", "BMapGLLib")
            let T=window.T;
            var  map = new T.Map('container', {
           projection: 'EPSG:4326'
             });
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);


     },//搜索地图具体位置
     map_search(T){
         var geocoder = new T.Geocoder();
        geocoder.getPoint(document.getElementById("searchPoint").value, this.searchRlt)
     },//处理位置信息
     searchRlt() {




     }
  }
}
</script>

<style>
</style>