离线百度地图使用

最近有个项目是用到了地图功能，其实地图功能使用起来应该没啥难度，看看api，例子往项目上一粘贴，改一下就可以达到需求，所以使用方面，对大家来说并不是很难。
我这次接到的需求是离线百度地图，给我一个ip，应该是服务器的，调用后台配置好的地图文件，然后前端往上面标点。由于我原来只用到过线上的，首次弄离线就有点蒙圈，刚开始没明白咋回事，弄了半天才搞明白，原来后台是把东西都配置好了，我只要请求就行了，以下是我引入以及在vue中使用的代码：

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= webpackConfig.name %></title><link rel="stylesheet" type="text/css" href="http://www.hotelhy.club/map/offlinemap/css/bmap.css"/><!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--><style>html,body,#app {height: 100%;margin: 0px;padding: 0px;}.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}#loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}#loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-webkit-animation: spin 2s linear infinite;-ms-animation: spin 2s linear infinite;-moz-animation: spin 2s linear infinite;-o-animation: spin 2s linear infinite;animation: spin 2s linear infinite;z-index: 1001;}#loader:before {content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-webkit-animation: spin 3s linear infinite;-moz-animation: spin 3s linear infinite;-o-animation: spin 3s linear infinite;-ms-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}#loader:after {content: "";position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-moz-animation: spin 1.5s linear infinite;-o-animation: spin 1.5s linear infinite;-ms-animation: spin 1.5s linear infinite;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}#loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #7171C6;z-index: 1000;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}#loader-wrapper .loader-section.section-left {left: 0;}#loader-wrapper .loader-section.section-right {right: 0;}.loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}.loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}.loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.loaded #loader-wrapper {visibility: hidden;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out;transition: all 0.3s 1s ease-out;}.no-js #loader-wrapper {display: none;}.no-js h1 {color: #222222;}#loader-wrapper .load_title {font-family: 'Open Sans';color: #FFF;font-size: 19px;width: 100%;text-align: center;z-index: 9999999999999;position: absolute;top: 60%;opacity: 1;line-height: 30px;}#loader-wrapper .load_title span {font-weight: normal;font-style: italic;font-size: 13px;color: #FFF;opacity: 0.5;}</style></head><body><div id="app"><div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div class="load_title">正在加载系统资源，请耐心等待</div></div></div><!-- <script type="text/javascript" src="static/map_load.js"></script> --><!-- <script type="text/javascript" src="map/offlinemap/map_load.js"></script>  --><script type="text/javascript" src="{你的ip}/offlinemap/map_load.js"></script><script type="text/javascript" src="{你的ip}/offlinemap/tools/LuShu_min.js"></script><script type="text/javascript" src="{你的ip}/offlinemap/tools/TrackAnimation_min.js"></script><script type="text/javascript" src="{你的ip}/offlinemap/tools/DistanceTool.min.js"></script></body>
</html>

map.vue

<template><div class="map" id="map"><div id="container" style="{height:mapHeight}"></div></div>
</template>
<script>
import {data} from "./data/styleData.js";
import {infos} from './data/infoData.js';
import { mapLineRelation,mapDeviceInfo,mapSensorInfo } from "@/api/map";
export default {data(){return{map: null,mapHeight: 500 + "px"}},created(){},mounted(){this.initMapHeight();// 创建Map实例this.map = new BMapGL.Map("container");  // 绘制弹出框let infoWindow = this.drawInfoWindow("塔杆信息","tgInfo")// 描述第一个点 let point = this.drawIcon(new BMapGL.Point(121.56467027463893,29.811085085528376),infoWindow)// 描述第二个点let point1 = this.drawIcon(new BMapGL.Point(121.55895705159733,29.81276159334472),infoWindow);// 添加地图组件this.addMapControl(point)// map.setMapStyleV2({styleJson: data});// 绘制路线this.drawLine([point,point1]);// 地图自适应window.onresize = () => {return (() => {this.initMapHeight()})()}},methods:{addMapControl(point){const {map} = this;map.centerAndZoom(point, 17)map.enableScrollWheelZoom(true); 	var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件map.addControl(navi3DCtrl);var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl();   // 添加缩放控件map.addControl(zoomCtrl);	// 将标注添加到地图中},drawIcon(point,infoWindow){const {map} = this;var myIcon = new BMapGL.Icon(require("./img/gt.png"), new BMapGL.Size(90,101));var marker = new BMapGL.Marker(point,{icon:myIcon});marker.addEventListener("click", function(){          map.openInfoWindow(infoWindow, point); //开启信息窗口}); map.addOverlay(marker);   for(let i=0;i<6;i++){let opt = {}if(i<3){opt.anchor = new BMapGL.Size(-40, 50-i*32);}else{opt.anchor = new BMapGL.Size(-70, 50-(i-3)*32);}let iconMaker = new BMapGL.Marker(point,{icon:new BMapGL.Icon(require(`./img/${i+1}.png`), new BMapGL.Size(30,30), opt)})map.addOverlay(iconMaker);iconMaker.addEventListener('click',function(){alert(i)})}return point;},drawInfoWindow(title,infoType){var opts = {width : 200,     // 信息窗口宽度height: 124,     // 信息窗口高度title : title , // 信息窗口标题}return new BMapGL.InfoWindow(infos[infoType],opts);  // 创建信息窗口对象                   // 将标注添加到地图中},drawLine(points){const {map} = this;for(let i=0;i<points.length;i++){if(points.length-1 == i) return;var polyline = new BMapGL.Polyline([points[i],points[i+1]], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});map.addOverlay(polyline);}},initMapHeight(){let main = document.getElementsByClassName('app-main');let map = document.getElementById('map');map.style.height = main[0].offsetHeight + "px";}}
}
</script>
<style>#container{width: 100%;height: 100%;overflow: hidden;}  
.BMap_cpyCtrl {display: none;
}.anchorBL {display: none;
}.BMap_mask {z-index: 999;
}
</style>