js地图开发

发表于 2022-03-17 分类于工具本文字数： 784 阅读时长 ≈ 3 分钟

LBS（Location Based Services，围绕地理位置数据而展开的服务）现在是越来越火，用到这技术的项目也是越来越多，就稍微做了下小调研，并简单记录下。由于技术发展过快，本篇仅供参考，可能明年就不适用了，以各大官网为准。

vue引入百度地图

// utils.js
export const fileTool = {
  // 异步加载百度地图
  loadBMap: function (ak) {
    return new Promise(function (resolve, reject) {
      try {
        console.log('BMap is defined:', BMapGL === undefined || BMapGL)
        resolve(BMapGL)
      } catch (err) {
        window.initBMapGL = function () {
          resolve(BMapGL)
        }
        const BMapUrl = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=initBMapGL`;
        fileTool.loadScript(BMapUrl, null, reject)
      }
    })
  },
  // 异步加载百度地图及BMapGLLib
  loadBMapGLLib: function (ak) {
    return new Promise(function (resolve, reject) {
      fileTool.loadBMap(ak).then(BMapGL => {
        let loaded = false;
        try {
          loaded = (BMapGLLib && BMapGLLib.DrawingManager);
        } catch (err) {
          loaded = false;
        }
        if (!loaded) {
          const GLLibFile = {
            js: 'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
            css: 'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
          }
          fileTool.loadCSS(GLLibFile.css);
          fileTool.loadScript(GLLibFile.js, function() {
            return resolve({BMapGL, BMapGLLib})
          }, function() {
            return resolve({BMapGL})
          });
        }
      })
    })
  },
  // 加载js文件
  loadScript: function (src, callback, reject) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    if (script.addEventListener) {
      script.addEventListener('load', function () {
        callback && callback();
      }, false);
      script.addEventListener('error', function () {
        reject && reject();
      });
    } else if (script.attachEvent) {
      script.attachEvent('onreadystatechange', function () {
        let target = window.event.srcElement;
        if (target.readyState == 'loaded') {
          callback && callback();
        }
      });
    }
    document.getElementsByTagName('head')[0].appendChild(script);
  },
  // 动态加载外部CSS文件
  loadCSS: function (url) {
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.url = url;
    document.getElementsByTagName('head')[0].appendChild(link);
  },
}

<template>
  <div class="service-location">
    <div id="baiduMapContainer"></div> 
  </div>
</template>

<script>
  import { fileTool } from "@/js/utils";
  export default {
    components: {
    },
    data() {
      return {
        BMapObj: null,
      };
    },
    methods: {
      // 创建地图
      initMap() {
        fileTool.loadBMapGLLib().then(BMapGL => {
          // 创建地图实例 
          this.BMapObj = new BMapGL.Map("baiduMapContainer");
          // 初始化地图，设置中心点坐标和地图级别
          this.BMapObj.centerAndZoom(new BMapGL.Point(116.404, 39.915), 19);
          //开启鼠标滚轮缩放
          this.BMapObj.enableScrollWheelZoom(true);
          // 添加比例尺控件
          this.BMapObj.addControl(new BMapGL.ScaleControl()); 
          // 添加缩放控件
          this.BMapObj.addControl(new BMapGL.ZoomControl());
          // 添加城市列表控件
          this.BMapObj.addControl(new BMapGL.CityListControl());
        })
      },
    },
    created() {
    },
    mounted() {
      this.initMap()
    },
  };
</script>

<style lang="scss" scoped>
.service-location {
  width: 100%;
  height: 100%;
  position: relative;
  #baiduMapContainer {
    width: 100%;
    height: calc(100vh - 125px);
  }
}
</style>

热门LBS

vue引入百度地图