浏览了很多其他的博客，发现每个人都是从webpack.base.conf.js配置，然后出现T不存在的报错，我都不知道怎么运次出来的 唉！！
**
一、在index.html文件中引入cdn资源：
** 在头部引入
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请到的KEY值"></script>
二、建立一个js文件，如 map.js
export default {
methods: {
addCtrl() {
let T = window.T
var 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 // 地图类型对象，即MapType。
},
{
title: '卫星',
icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
layer: window.TMAP_HYBRID_MAP
}
])
this.map.addControl(ctrl)
},
markerPoint(site) {
let T = window.T
site.forEach(item => {
//创建标注对象
let marker = new T.Marker(new T.LngLat(item.lng, item.lat))
//向地图上添加标注
this.map.addOverLay(marker)
})
},
}
}
三、在vue页面中使用
<template>
<div>
<!--创建容器-->
<div id='mapDiv' style='position:absolute;width:100%;height:100%;'></div>
</div>
</template>
<script>
import map from '@/assets/js/map' // 引入刚才的map.js 注意路径
export default {
mixins: [map],
data() {
return {
map: '', // 对象
zoom: 12, // 地图的初始化级别，及放大比例
centerLatitude:'39.65053092',//中心纬度
centerLongitude:'118.1834506',//中心经度
}
},
mounted() {
// 挂载完成后渲染地图
this.$nextTick(function() {
this.onLoad()
})
},
methods: {
onLoad() {
let T = window.T
this.map = new T.Map('mapDiv')
this.map.centerAndZoom(new T.LngLat(this.centerLongitude, this.centerLatitude), this.zoom) // 设置显示地图的中心点和级别
// 添加地图类型控件
this.addCtrl()
// 普通标注
let site = [
{ lng: 116.30034, lat: 39.98054 },
{ lng: 116.41238, lat: 40.07689 },
{ lng: 116.34143, lat: 40.03403 },
]
this.markerPoint(site)
},
},
}
</script>
