[JavaScript知识库]vue中引入百度地图

vue中引入百度地图

一、通过vue注册的方式引入

注：vue百度地图官网

安装百度地图

$ npm install vue-baidu-map --save

引入

使用百度地图首先需要去百度地图开放平台申请ak密钥，登录百度账号后：控制台->应用管理->我的应用->创建应用即可，创建完成后即可看到生成的ak密钥

1）全局注册，在工程的main.js中引入

import Vue from "vue";
import baiduMap from "vue-baidu-map";

Vue.use(baiduMap, { ak: mapAK });

2）局部注册，在使用地图的页面引入
地图组件存放在vue-baidu-map/components 文件夹下，可根据需要按模块引用

import baiduMap from "vue-baidu-map/components/map/Map.vue";
import bmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import bmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow.vue";

export default {
  components: {
    baiduMap,
    bmMarker,
    bmInfoWindow
  }
}

使用

更多详细使用参考官网API文档：javaScript API，web服务API

<template>
  <baidu-map class="bm-view" ak="mapAK">
  </baidu-map>
</template>

二、通过js引入

1）引入map

① 基础map
定义一个loadMap.js

/**
 * 动态加载百度地图api函数
 * @param {String} ak  百度地图AK，必传
 */
 export default function loadBMap(ak) {
  return new Promise((resolve, reject) => {
    if (typeof window.BMap !== "undefined") {
      resolve(window.BMap);
      return true;
    }
    window.onBMapCallback = function () {
      resolve(window.BMap);
      return true;
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=onBMapCallback&s=1`;
    script.onerror = reject;
    document.head.appendChild(script);
    return true;
  });
}

② BmapGL（基于百度地图JavaScript GL版API封装的React组件库，有需要可引入）
定义一个bmpgl.js

 export default function BMPGL(ak) {
  return new Promise((resolve, reject) => {
    window.init = function () {
      // eslint-disable-next-line
      resolve(BMapGL)
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

引入

import loadBMap from "../loadMap";
import BMPGL from "../bmpgl";

mounted() {
	const p = loadBMap(this.mapAK); // 加载引入BMap
    p.then(() => {
      this.initMap();
    });
}
methods: {
    initMap() {
      const that = this;
      this.map = new window.BMap.Map("map-container", {
        enableMapClick: false
      }); // 新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
      // 初始化位置
      const point = new window.BMap.Point(
        this.longitude,
        this.latitude
      );
      this.map.centerAndZoom(point, 15);
      this.mk = new window.BMap.Marker(point, { enableDragging: true }); // 创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
      this.map.addOverlay(this.mk); // 将覆盖物添加到地图中
      this.mk.addEventListener("dragend", (e) => {
        that.getAddrByPoint(e.point, true); // 拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
      });
      const navigationControl = new window.BMap.NavigationControl({
        // 创建一个特定样式的地图平移缩放控件
        anchor: window.BMAP_ANCHOR_TOP_RIGHT, // 靠右上角位置
        type: window.BMAP_NAVIGATION_CONTROL_LARGE // LARGE控件类型
      });
      this.map.addControl(navigationControl); // 将控件添加到地图
      if (this.unloadLocation) {
        // 如果未加载位置信息，则定位到当前位置
        this.geolocation();
      }
    },
    /**
     * 逆地址解析函数（根据坐标点获取详细地址）
     * @param {Object} point   百度地图坐标点，必传
     */
    getAddrByPoint(point, movePoint = false) {
      // 设置手动定位的坐标
      if (this.unloadLocation || movePoint) {
        this.unloadLocation = false;
        // 逆地理地址解析
        this.getGeocoding(point); // 调用百度web服务api接口进行逆地理地址解析
        this.longitude = point.lng; // 记录当前选中地址经度
        this.latitude = point.lat; // 记录当前选中地址纬度
        this.mk.setPosition(point); // 重新设置标注的地理坐标
        this.map.panTo(point); // 将地图的中心点更改为给定的点
      }
    },
    geolocation() {
      BMPGL(this.mapAk).then((BMapGL) => {
        const geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r) {
          if (this.getStatus() === window.BMAP_STATUS_SUCCESS) {
            this.longitude = r.lng;
            this.latitude = r.lat;
          } else {
            alert(`failed${this.getStatus()}`);
          }
        });
      });
    },
  }