学习笔记——uni-app在App中使用web-view

在地图添加覆盖物，或设置额外图层，这种情况，uni-app自带的地图大多满足不了这些需求。所以需要用到web-view这一组件来实现。

 

1.创建带有地图的html

注意：App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下

2. 在组件中引用web-view

    <view class="page-container">
        <web-view :src="webSrc" @message="handlePostMessage"></web-view>
    </view>

    export default {
		data() {
			return {
				webSrc: '/hybrid/html/index.html'
			}
		},
		onLoad() {

		},
		methods: {
            handlePostMessage(e) {
                console.log(e.detail.data)
                let action = e.detail.data[0].action
                console.log(action)
                uni.navigateTo({ url: '/pages/else/else?action=' + action })
            }
		}
	}

其中，@message用来监听，html页面给app通过uni.postMessage方法传递的信息。

注意：在PC端测试时，uni.postMessage没有反应，可以使用移动端测试或者使用雷神等模拟器进行测试。

3.完善html页面

<div id="map-container"></div>

<!-- 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 src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key值"></script>

<script>
window.onload = function(){
            var map = new AMap.Map('map-container', {
                zoom:11,//缩放级别
                center: [116.397428, 39.90923],//地图显示中心点坐标，如果没有center属性，则会定位到你当前所处的位置
                // viewMode:'3D'//使用3D视图
            });
            
            var text = new AMap.Text({
                text: '故宫 32',
                title: '故宫',
                anchor: 'center',
                draggable: false,
                cursor: 'pointer',
                zIndex: 99,
                style: {
                    'padding': '0.25rem .5rem',
                    'border-radius': '.25rem',
                    'background-color': 'rgba(0,0,255,0.5)',
                    'font-size': '13px',
                    'color': 'white'
                },
                position: [116.45, 39.90923],
                clickable: false,
                extData: {
                    name: '故宫',
                    positon: '116.397428, 39.90923'
                }
            })
            text.setMap(map);
        }
</script>

注意：

  uni的SDK必须要引入。

  高德地图的key值，可以在高德应用中注册后获取。

4.效果