vue引入天地圖
阿新 • • 發佈:2018-11-08
最終效果圖:
1、新建一個初始化js(init.js)
在index.html引入js
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的tk" type="text/javascript"></script>
export default { init: function() { 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) } // // 插入script指令碼 // const scriptNode = document.createElement('script') // scriptNode.setAttribute('type', 'text/javascript') // scriptNode.setAttribute('src', TMapURL) // document.body.appendChild(scriptNode) }) } }
2、在需要的頁面引入js
<template> <div> <div id="mapDiv" class="mapDiv" ref="mapDiv"> </div> </div> </template> <script> import BaiduMap from '@/common/js/baidu-map' // import {getCity} from '@/api/remote' // import BMap from 'BMap' export default { data() { return { zoom: '11', points: [], line: '', T: '', lay: '', map: '', drivingRoute: '', _CarTrack: '', startIcon: '', endIcon: '', config: '', iconMaker: [], myIcon: '' } }, created() { this.startIcon = 'http://lbs.tianditu.gov.cn/images/bus/start.png' this.endIcon = 'http://lbs.tianditu.gov.cn/images/bus/end.png' this.myIcon = 'http://lbs.tianditu.gov.cn/images/bus/end.png' }, mounted() { setTimeout(this.getPosition(), 1000) }, watch: { '$route': 'getPosition' }, methods: { getPosition() { window.onload = function() { console.log(11111) } BaiduMap.init().then((T) => { this.T = T this.zoom = 12 var imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' // 建立自定義圖層物件 this.lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 }) var config = { layers: [this.lay] } this.map = new T.Map(this.$refs.mapDiv, config)// 初始化地圖物件 this.map.centerAndZoom(new T.LngLat(116.40969, 39.94940), this.zoom)// 設定顯示地圖的中心點和級別 // 建立圖片物件 var icon = new T.Icon({ iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png', iconSize: new T.Point(19, 27), iconAnchor: new T.Point(10, 25) }) var marker = new T.Marker(new T.LngLat(116.404, 39.945), { icon: icon }) // 建立點 this.map.addOverLay(marker) // 增加點 this.points.push(new T.LngLat(116.404, 39.945), new T.LngLat(116.411794, 39.9068), new T.LngLat(116.32969, 39.92940), new T.LngLat(116.385438, 39.90610)) const points1 = [] points1.push(new T.LngLat(116.404, 39.845), new T.LngLat(116.411794, 39.915)) // 建立線物件 var line = new T.Polyline(points1, { color: '#fff' }) var line1 = new T.Polyline(this.points, { color: '#f00' }) // 向地圖上新增線 this.map.addOverLay(line1) this.map.addOverLay(line) // // 建立資訊視窗物件 // var infoWin = new T.InfoWindow() // infoWin.setLngLat(new T.LngLat(116.404, 39.945)) // // 設定資訊視窗要顯示的內容 // infoWin.setContent('起始點') // // 向地圖上新增資訊視窗 // this.map.addOverLay(infoWin) }).catch(error => { console.log(error) }) } } } </script> <style scoped> .mapDiv{ width: 100%; height: 85vh; } </style>
就可以看到效果了,更多功能可以去天地圖官網檢視