BIGEMAP地图VUE中引入

简介: BIGEMAP地图VUE中引入

一、获取地图服务器参数

<!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;
  }
目录
相关文章
|
2天前
|
JavaScript
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
18 6
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
11 1
|
4天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
16 1
|
4天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
12 0
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
11 0
|
4天前
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
8 0
|
4天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
5 0