vue使用高德地图画电子围栏_电子围栏 天地图 vue

image.png

1.先需要在index.html引入天地图的js

2.初始化天地图

// tMap.js

export default {

init () {

return new Promise((resolve, reject) => {

// debugger

// 如果已加载直接返回

// 如果已加载直接返回

if (typeof window.T !== 'undefined') {

console.log('地图脚本初始化成功1111...')

resolve(window.T)

return true

}

window.onload = function() {

console.log('地图脚本初始化成功...')

// eslint-disable-next-line

resolve(window.T)

}

})

}

}

3.vue文件引入天地图

// vue文件

开始绘制

重绘

import TMap from '@/utils/tMap'

export default {

data() {

return {

map: null

}

},

mounted() {

this.init()

},

methods: {

init () {

this.map = new T.Map('mapDiv')

this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12)

},

drawPolygon () {

const PolygonOptions = {

color: '#f00',

opacity: '0.2',

fillColor: '#00f',

fillOpacity: '0.2'

}

const PolygonTool = new T.PolygonTool(this.map, PolygonOptions)

this.map.clearOverLays()

PolygonTool.open()

//绑定draw事件 用户双击完成一次折线绘制时触发事件。

PolygonTool.addEventListener('draw', this.getPoints)

},

getPoints (e) {

console.log(e)

},

removeOverlay () {

this.map.clearOverLays()

}

}

}

.mapDiv{

width: 100%;

height: 85vh;

}