功能需求
博主做得是一個校園項目的校車管理模塊，主要功能是uinapp地圖上顯示校車站點，運行軌跡的一些功能，大概的一些截圖放在下面
遇到的問題及具體實現方法
1.首先就是uniapp怎么引入gis的地圖了（最重要因為不同的地圖拉取的gps數據會導致一些點位會偏差）
解決方法：由於我們gis在開發pc端的時候是用html引入的第三方地圖的js,uniapp使用的map限定了高德百度，坐標系不一致而且不好二次開發不做考慮。接下來就是怎么通過uniapp引入第三方js。
先說一下自己踩到的坑，在uniapp文檔框架-->配置-->h5下面有一個使用自定義模板的方法
官方描述是這樣的：使用自定義模板時，1. 工程根目錄下新建一個html文件；2. 復制下面的基本模板內容，到這個html文件，在此基礎上修改meta和引入js；3. 在 manifest.json->h5->template
按照流程運行到chrom果然地圖完美出現，但是運行到手機一片空白，原因就是瀏覽器的內核和手機不一樣，手機上並不會走這個html文件
最后實現方法
通過uniapp的web-view組件實現
<web-view :webview-styles="webviewStyles" src="/hybrid/html/map.html"></web-view>
需要注意的是html文件只能在hybrid或者static文件目錄下面
2.關於web-view組件層級的問題。
在運行到手機web-view會默認最高層級，官方文檔也有4種解決方法，自己也嘗試了subNVue的方法，效果不是十分好，而且由於地圖上彈窗功能不少交互也比較多，也沒再嘗試其他方法，直接在html文件里進行頁面彈窗交互邏輯開發。
3.關於html里面頁面自適應的問題
由於uniapp使用的是rpx進行自適應的，在html文件里不再生效。就想着使用自定義變量的方試計算實現自定義document.documentElement.style.setProperty(--val, 750 / document.body.clientWidth);然后style標簽里的樣式都是以calc計算的方式來寫
4.關於在html里面使用vue。
由於純html很久沒有寫過了，項目要得比較急，就在html里面使用vue寫的。主要方法是引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
在script標簽
`
new Vue({
el: "#map",
data: {
},
methods: {}
})
`
map是最外層div的id,data也不需要return
5.移動端獲取本地緩存
在html大多數uniapp的api也不能進行使用，但是使用web-view是可以使用h5+的api,調用接口使用的token需要從本地緩存拿取
let _this = this; document.addEventListener('plusready', () => { _this.userToken = plus.storage.getItem('token'); _this.baseUrl = plus.storage.getItem('baseUrl'); })