一、获取地图服务器参数
<!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/> <link href='http://192.168.0.130:3000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet'/> <script src='http://192.168.0.130:3000/bigemap.js/v2.1.0/bigemap.js'></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> <title>xxxxxx地图</title> </head> <body> <div id='map'></div> <script> BM.Config.HTTP_URL = 'http://192.168.0.130:3000'; var map = BM.map('map', 'bigemap.a8s5fqnt', {crs: BM.CRS.Baidu, center: [37.281829833984375, 114.79997253417969], zoom: 7, zoomControl: true }); map.fitBounds([[36.75175476074219, 113.75171661376953], [37.81190872192383, 115.84822845458984]]); </script> </body> </html>
二、vue引入js
配置mapUrl= http://192.168.0.130:3000
//map.js const { mapUrl } = require('@/dev') let script = [ mapUrl+'/bigemap.js/v2.1.0/bigemap.js', //如果有更多的JS要引用 ，也一起放到这个数组中 ] let link = [ mapUrl+'/bigemap.js/v2.1.0/bigemap.css'] export default new Promise(resolve => { link.map((v, index) => { let has = document.getElementById('bigemap_link_' + index) if (has) return let link = document.createElement('link') link.rel = 'stylesheet' link.async = false link.href = v link.id = 'bigemap_link_' + index document.head.appendChild(link) }) const loads = script.map((v, index) => { let has = document.getElementById('bigemap_script_' + index) if (has) return let script = document.createElement('script') script.type = 'text/javascript' script.id = 'bigemap_script_' + index script.async = false script.src = v document.head.appendChild(script) return script }) if (loads) { let end = loads.pop() end.onload = resolve } else { resolve() } })
三、vue文件引入
import bigemap from './map'
四、地图初始化
init() { bigemap.then(() => { this.bm = window.BM this.bm.Config.HTTP_URL = this.$text.pgisURL this.map = this.bm.map(this.$refs['bigemap'], 'bigemap.9fbtu3oz', { crs: this.bm.CRS.Baidu, center: [37.16, 114.23], zoom: 16, minZoom: 8, maxZoom: 18, zoomControl: true, attributionControl: false, }) //打印地图的缩放比例 this.map.on('zoom', function () { console.log('zoom: ', this.getZoom()) }) //设置地图的边界 this.map.setMaxBounds([ [37.67, 115.772], [36.66, 113.67], ]) this.map.panInsideBounds([ [37.67, 115.772], [36.66, 113.67], ]) }) },
五、去除地图logo
/deep/ .bigemap-left { display: none; }
