uniapp发布为小程序加载mapbox

最新推荐文章于 2024-09-05 09:28:50 发布

地科大宝贝

最新推荐文章于 2024-09-05 09:28:50 发布

阅读量4.6k

点赞数

文章标签： uni-app gis 小程序

本文链接：https://blog.csdn.net/qq_43171049/article/details/117774220

版权

小程序的踩坑之旅

1 uniapp 本身是加载不了mapbox的

下面两个是在vue环境下导入mapbox

vuecli+mapboxgl创建demo

Vue中使用地图平台MapboxGL

uniapp中加载mapbox会出现这个错误

“TypeError: Cannot read property ‘getElementById’ of undefined”

原因：微信小程序不支持操作dom元素， dom is not defined

mapbox 他的Map方法里面就用的document.getElementById ，是封装好的，因此加载不出来，如下图
在这里插入图片描述

2 小程序仅支持加载网络网页，不支持本地html

App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在uni-app 项目根目录->hybrid->html文件夹下，如下为一个加载本地网页的uni-app项目文件目录示例：
在这里插入图片描述

加载本地文件加载不了

this.url = `/hybrid/html/map/chooseDev.html`

加载网络文件可以

this.url = 'http://ip地址:8080/tgmobile/hybrid/html/map/chooseDev.html?lon=119.318580&lat=26.034681'

文章

如何在uni-app正确使用web-view

uniapp跳转webview后H5不执行UniAppJSBridgeReady 回调无用

注意
目前通过webview跳转到其他网址支持：

1、与微信小程序绑定的微信公众号文章地址;

2、在微信小程序后台配置好业务域名的地址。

3 查看官方文档，copy实例代码，终于可以加载出来了！！！

https://uniapp.dcloud.io/component/web-view

uni.postMessage(OBJECT)

网页向应用发送消息，在 <web-view>的message事件回调 event.detail.data中接收消息。

Tips

传递的消息信息，必须写在data对象中。

event.detail.data中的数据，以数组的形式接收每次 post 的消息。

// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
    uni.postMessage({
        data: {
            action: 'message'
        }
    });
});

代码如下：

跳转的vue组件：

<template>
	<view>
		<web-view :src="url" @message="getMessage"></web-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				url:''
			}
		},
		onLoad(option) { 
			console.log("chooseDev option:",option)
			this.url = 'http://ip地址:8080/tgmobile/hybrid/html/map/chooseDevTest.html'
		},
		methods:{
			getMessage(e){
				console.log("e:",e)
			}
		}
	}
</script>
	
<style>

</style>

webview页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网络网页</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
  </head>
  <body>
    
    <div id="map"></div>

    <script type="text/javascript">
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    </script>
    <!-- uni 的 SDK -->
    <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">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
        mapboxgl.accessToken = 'your accessToken';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
            zoom: 14,
            center: [119.318580, 26.034681],  
            minZoom: 3
        });
      });
    </script>
  </body>
</html>