vue高德、谷歌地图动态加载
前言引入地图资源页面使用完整map.js前言
因为我们这个项目，做的是国际化项目，考虑的是，在国内使用高德地图，在国外使用谷歌地图，所以在这里做了个动态引入地图，根据平台所属地域来判断使用高德地图还是谷歌地图。
首先，我们需要一个动态加载外部资源的函数，用来动态加载地图资源。
我们可以专门新建一个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("/maps/api/js?key=自己的key&libraries=visualization,places,geometry&language=en-us®ion=EG").then(() => {resolve();}).catch(() => {ElementUI.Message.warning('地图资源未成功加载，请尝试检查网络或刷新浏览器');reject();})}} else {if (window.AMap && window.AMapUI) {resolve();// 未载入高德地图API，则先载入API再初始化} else {// 载入高德地图和UI组件loadJs("/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"><divid="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("/maps/api/js?key=自己的key&libraries=visualization,places,geometry&language=en-us®ion=EG").then(() => {resolve();}).catch(() => {ElementUI.Message.warning('地图资源未成功加载，请尝试检查网络或刷新浏览器');reject();})}} else {if (window.AMap && window.AMapUI) {resolve();// 未载入高德地图API，则先载入API再初始化} else {// 载入高德地图和UI组件loadJs("/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, // 线条宽度，默认为 1strokeColor: 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;}//创建一个 高德地图Iconexport function getMapIcon() {return new window.AMap.Icon({// 图标尺寸size: new window.AMap.Size(30, 30),// 图标的取图地址image:"///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});}
因为我们的的项目用到的很多功能都重复，所以我暂时进行了一个简单的封装，谷歌地图的还没写，暂时只弄了高德地图的，代码和使用方法，都挺简单，这里就不一一赘述了，又不懂的可以私信问我，
有点乱，可能是脑壳写昏了，焯
