uniapp中使用第三方百度地图_小笑残虹_uniapp 百度地图

网络 02-07 7558

要使用第三方百度地图，首先要去百度地图官方申请一个密钥，之后引入百度地图的API文件，参考使用文档即可开发使用。而在uniapp中是没法直接引入百度地图API文件的，我们要结合uniapp中的web-view组件来使用。

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次iframe内嵌的其他url。

经过我多次实验web-view要引入的.HTML文件放到hybrid/html目录下面一直存在问题，然而放到static目录下面是正常的。

在用到地图的页面，通过web-view组件引入开发百度地图的静态页面

在/static/html/map.html中开发百度地图的功能

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百度地图</title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #mapPage{ height: 100%; position: relative; } #container { height: 100% } .conter{ width: 30%; height: 60px; line-height: 60px; /* 毛玻璃效果 */ background: rgba( 255, 255, 255, 0.20 ); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); backdrop-filter: blur( 4.5px ); -webkit-backdrop-filter: blur( 4.5px ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 ); position: absolute; right: 6px; text-align: center; font-weight: bold; z-index: 1000; } .normal{ top: 40px; color: #19be6b; } .warn{ top: 110px; color: #ff9900; } .error{ top: 180px; color: #fa3534; } </style> </head> <body> <div id='mapPage'> <div id='container'></div> <div class='normal conter'>正常：90</div> <div class='warn conter'>报警：90</div> <div class='error conter'>故障：90</div> </div> </body>  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"> </script>  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=您的密钥"></script>  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script type="text/javascript"> document.addEventListener('UniAppJSBridgeReady', function() { $('.normal').click(function(){ goDetailPage('normal'); }) $('.warn').click(function(){ goDetailPage('warn'); }) $('.error').click(function(){ goDetailPage('error'); }) // 跳转到列表详情页面 function goDetailPage(type){ uni.navigateTo({ url: `/pages/alarmListDetail/alarmListDetail?type=${type}` }) } // ------------------------------------ 配置百度地图 -------------------------------------------------------------------------------- var map = new BMapGL.Map("container"); // 创建地图实例 var point = new BMapGL.Point(113.567845, 34.824952); // 创建点坐标 map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 map.addControl(scaleCtrl); var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件 map.addControl(zoomCtrl); var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件 map.addControl(cityCtrl); // 添加标注点 var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 // 监听标注事件 marker.addEventListener("click", function() { console.log("您点击了标注"); // 跳转到厂区地图页面 uni.navigateTo({ url: '/pages/factoryMap/factoryMap' }) }); // 向地图中添加文本标注 var content = "国家863软件园"; var label = new BMapGL.Label(content, { // 创建文本标注 position: point, // 设置标注的地理位置 offset: new BMapGL.Size(0, 0) // 设置标注的偏移量 }) // map.addOverlay(label); // 将标注添加到地图中 // label.setStyle({ // 设置label的样式 // color: '#000', // fontSize: '30px', // border: '2px solid #1E90FF' // }) // 监听标注事件 label.addEventListener("click", function() { alert("您点击了标注"); }); }); </script> </html>

最终效果如下图所示，在uniapp中使用第三方地图就是这么简单，主要就是使用到了web-view组件，开发时请参考官方文档的介绍，一定要留意注意部分。文章最后：更多文章欢迎来到我的公众号：小笑残虹。