vue高德、谷歌地图动态加载

前言

因为我们这个项目，做的是国际化项目，考虑的是，在国内使用高德地图，在国外使用谷歌地图，所以在这里做了个动态引入地图，根据平台所属地域来判断使用高德地图还是谷歌地图。
首先，我们需要一个动态加载外部资源的函数，用来动态加载地图资源。
我们可以专门新建一个map.js,用来做地图功能，因为我们是做车联网的项目，所以地图功能还是比较丰富，map.js封装的方法也比较多，最后我会贴出来

//动态加载外部资源
function loadJs(src) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.type = "text/javascript"
        script.onload = () => {
            resolve()
        }
        script.onerror = () => {
            reject()
        }
        script.src = src;
        document.getElementsByTagName('body')[0].appendChild(script);
    })
}

引入地图资源

由于script下载是异步的所以，会出现，地图资源还未加载完毕，新建地图报错的情况，这里我们用Promise来做
先判断地域，是不是在中国，然后判断window对象上是否有高德地图对象AMap ，或者判断window对象上是否有谷歌地图对象google，有的话resolve()，没有的话先加载loadJs，然后在loadJs的回调里resolve()，否则报错

/***
 * 地图加载
 */
export function InitMap(region) {
    return new Promise((resolve, reject) => {
        if (region != "cn") {
            if (window.google) {
                resolve();
                // 未载入谷歌地图API，则先载入API再初始化
            } else {
                // 载入谷歌地图和UI组件
                loadJs(
                    "https://maps.googleapis.com/maps/api/js?key=自己的key&libraries=visualization,places,geometry&language=en-us&region=EG"
                ).then(() => {
                    resolve();
                }).catch(() => {
                    ElementUI.Message.warning('地图资源未成功加载，请尝试检查网络或刷新浏览器');
                    reject();
                })
            }
        } else {
            if (window.AMap && window.AMapUI) {
                resolve();
                // 未载入高德地图API，则先载入API再初始化
            } else {
                // 载入高德地图和UI组件
                loadJs(
                    "https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.Riding,AMap.PolyEditor"
                ).then(() => {
                    setTimeout(() => {
                        resolve();
                    }, 500)

                }).catch(() => {
                    ElementUI.Message.warning('地图资源未成功加载，请尝试检查网络或刷新浏览器');
                    reject();
                })
            }
        }
    })
}

页面使用

先贴代码
首先导入

import { InitMap } from "@/utils/map.js";

然后在页面生命周期里

mounted() {
    //传入参数cn，代表中国区，其他参数都是国外使用谷歌地图
    InitMap("cn")
      .then(() => {
        this.loading = false; //地图是否正在加载
        this.successMap = true; // 地图是否成功加载
        this.loadAMap();   //加载成功，构建地图
      })
      .catch(() => {
        this.successMap = false;
        this.loading = false;
      });
  },
 methods: {
    // 初始化高德地图
    loadAMap() {
      let that = this;
      this.map = new window.AMap.Map("platform-map", {
        mapStyle: "amap://styles/398469a1eaea0a930c1cb33226ee3080", //设置地图的显示样式
        zoom: 6,
        resizeEnable: true,
      });
      //地图加载完毕触发
      this.map.on("complete", function (e) {
        // 一般在这一步进行点标记、轨迹、自定义地图数据展示等，之类的
      });
    },
  }

 <!-- 地图模块 -->
    <div class="map">
      <div
        id="platform-map"
        v-loading="loading"
        element-loading-text="地图资源拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#ededed"
        v-if="successMap"
      ></div>
      <!-- 加载失败展示-->
      <div class="err-map" v-else>
        <i class="el-icon-warning-outline"></i>
        <span>地图资源加载失败，请检查网络或刷新页面</span>
      </div>
    </div>

#platform-map {
  height: 400px;
  width: 100%;
  background-color: #ededed;
}
.err-map {
  height: 400px;
  width: 100%;
  background-color: #ededed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.err-map i {
  margin-bottom: 12px;
  font-size: 24px;
}
.map {
  position: relative;
  margin-bottom: 30px;
}

完整map.js

import ElementUI from 'element-ui';


function loadJs(src) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.type = "text/javascript"
        script.onload = () => {
            resolve()
        }
        script.onerror = () => {
            reject()
        }
        script.src = src;
        document.getElementsByTagName('body')[0].appendChild(script);
    })
}



/***
 * 地图加载
 */
export function InitMap(region) {
    return new Promise((resolve, reject) => {
        if (region != "cn") {
            if (window.google) {
                resolve();
                // 未载入谷歌地图API，则先载入API再初始化
            } else {
                // 载入谷歌地图和UI组件
                loadJs(
                    "https://maps.googleapis.com/maps/api/js?key=自己的key&libraries=visualization,places,geometry&language=en-us&region=EG"
                ).then(() => {
                    resolve();
                }).catch(() => {
                    ElementUI.Message.warning('地图资源未成功加载，请尝试检查网络或刷新浏览器');
                    reject();
                })
            }
        } else {
            if (window.AMap && window.AMapUI) {
                resolve();
                // 未载入高德地图API，则先载入API再初始化
            } else {
                // 载入高德地图和UI组件
                loadJs(
                    "https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.Riding,AMap.PolyEditor"
                ).then(() => {
                    setTimeout(() => {
                        resolve();
                    }, 500)

                }).catch(() => {
                    ElementUI.Message.warning('地图资源未成功加载，请尝试检查网络或刷新浏览器');
                    reject();
                })
            }
        }
    })
}



//高德地图逆向地理编码
export function getAMapAddress(e) {
    return new Promise((resolve) => {
        window.AMap.plugin("AMap.Geocoder", function () {
            var geocoder = new window.AMap.Geocoder();
            geocoder.getAddress(e, function (status, result) {
                if (status === "complete" && result.info === "OK") {
                    // result为对应的地理位置详细信息
                    resolve(result.regeocode);
                } else {
                    ElementUI.Message.warning('地理编码解析失败');
                }
            });
        });
    })
}

//高德搜索位置
export function getLocation(e) {
    return new Promise((resolve) => {
        window.AMap.service(["AMap.PlaceSearch"], function () {
            var placeSearch = new window.AMap.PlaceSearch();
            placeSearch.search(e, function (status, result) {
                if (status == "complete" && result.info == "OK") {
                    resolve(result.poiList.pois[0].location);
                } else {
                    ElementUI.Message.warning('暂未查询到该地址');
                }
            });
        });
    })

}


//高德地图电子围栏
export function setCnMapFence(paths, bacngroundColor, strokeColor) {
    //多边形轮廓线的节点坐标数组
    var polygonPath = [];
    for (let i in paths) {
        polygonPath.push(new window.AMap.LngLat(paths[i].lng, paths[i].lat));
    }
    var polygon = new window.AMap.Polygon({
        path: polygonPath,
        fillColor: bacngroundColor, // 多边形填充颜色
        borderWeight: 2, // 线条宽度，默认为 1
        strokeColor: strokeColor, // 线条颜色
    });
    return polygon;
}

//根据中心点获取周围四个点
export function getBoundingBox(pLatitude, pLongitude, pDistanceInMeters) {
    if (typeof Number.prototype.toRad === "undefined") {
        Number.prototype.toRad = function () {
            return (this * Math.PI) / 180;
        };
    }
    var latRadian = pLatitude.toRad();
    var degLatKm = 110.574235;
    var degLongKm = 110.572833 * Math.cos(latRadian);
    var deltaLat = pDistanceInMeters / 1000.0 / degLatKm;
    var deltaLong = pDistanceInMeters / 1000.0 / degLongKm;

    var topLat = pLatitude + deltaLat;
    var bottomLat = pLatitude - deltaLat;
    var leftLng = pLongitude - deltaLong;
    var rightLng = pLongitude + deltaLong;

    var northWestCoords = topLat + "," + leftLng;
    var northEastCoords = topLat + "," + rightLng;
    var southWestCoords = bottomLat + "," + leftLng;
    var southEastCoords = bottomLat + "," + rightLng;

    var boundingBox = [
        northWestCoords,
        northEastCoords,
        southEastCoords,
        southWestCoords,
    ];

    return boundingBox;
}


//创建一个 高德地图Icon
export function getMapIcon() {
    return new window.AMap.Icon({
        // 图标尺寸
        size: new window.AMap.Size(30, 30),
        // 图标的取图地址
        image:
            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        // 图标所用图片大小
        imageSize: new window.AMap.Size(25, 30),
        // 图标取图偏移量
        imageOffset: new window.AMap.Pixel(0, 0),
    });
}


//创建一个高德地图 标记
export function getCnMapMarker(lnglat, icon) {
    return new window.AMap.Marker({
        position: lnglat,
        icon: icon
    });
}

因为我们的的项目用到的很多功能都重复，所以我暂时进行了一个简单的封装，谷歌地图的还没写，暂时只弄了高德地图的，代码和使用方法，都挺简单，这里就不一一赘述了，又不懂的可以私信问我，
有点乱，可能是脑壳写昏了，焯