因为公司要求一定要用百度地图,网上引入百度地图的方法说的就三种,因为我用的是VUE3

• 第一种方法引入插件(插件名vue-baidu-map)一直报错vue2没试过反正vue3引进去就是报错
• 第二种方法用异步引入 如果只开发app和h5可以用,微信小程序反正不显示,但是不知道为啥有时候不稳第一次引的时候(三端都显示除了微信小程序)是显示的第二次就不显示了h5没问题app端已初始化就一直报警告地图出不来;
• 第三种方法就是用webView组件嵌套html页面的方式把地图弄出来(我用的就是这种方式)

微信小程序引入百度地图的话就是你把H5写好在通过webView组件直接引进去 因为研究了两三天实在没有解决的办法着是我想到最好的解决办法了

通过这种方式引入的好处就是你能在这里直接写一些逻辑不需要做交互(只做h5合适但是写h5的话也没必要用uniapp一堆坑建议直接用vue写h5)

第一步 յBaiDuMap.js

第二步 回到你vue页面 建一个renderjs 的script

这种方法就比较麻烦了,需要你自己在html页面写一些逻辑还要和uniapp进行交互,如果只开发app端的话就不会很麻烦要开发小程序的话就必须要把h5写了然后开一个项目用套h5的页面;

这种方式随便你用纯html 还是vue脚手架还是uniapp搭建h5的页面 我自己用的是cdn方式引入的vue3(图方便),如果要本地引的话最好目录:

记得下uni.webview.js的文件

第一步 在html引入下好的uni.webview.js和百度map的js

第二步 调地图了

第三步 通讯方式

app端:在html页面提前写好方法通过就可以给webview发信息,webview给uniapp通过uni.postMessage({data:{// 你要传的参数 不知道能不能传方法过去调用没试过}})

h5端:html页面提前定义方法,然后在uniapp页面通过给webview发页面发信息,webview给h5发信息通过window.top?.postMessage({state}, '*') // 星号是代表全部 到了线上最好写你线上的域名

如果你和我一样要多端开发小程序及app, 因为开发小程序不管用哪种方法都会有点bug不是显示不出来就是webview的层级太高了别的组件盖不不过去,别死磕了我磕了两三天真的没办法只想到了写好h5在套一层壳!!

在写html页面的时候写方法建议这样写