uni-app vue2 在vue页面web-view 动态加载谷歌地图 并添加高级标记时 报错this.Mi.replaceChildren is not a function

uni-app vue2 在vue页面web-view 动态加载谷歌地图 并添加高级标记时 报错this.Mi.replaceChildren is not a function

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 10
手机厂商 vivo
手机机型 vivos7e
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

操作步骤：

        async function initMap() {  
            const { Map} = await google.maps.importLibrary("maps");  
            const { AdvancedMarkerElement,PinElement } = await google.maps.importLibrary("marker");  

            let map = new Map(document.getElementById('container'), {  
                center: {  
                    lat: -25.363,  
                    lng: 131.044  
                },  
                zoom: 15, //地图缩放比例  
                mapId: "DEMO_MAP_ID"  
            }); // 创建地图实例  
            const pinBackground = new PinElement({  
                background: '#FFFFFF',  
             });  
            const marker = new AdvancedMarkerElement ({  
                map,  
                position: {  
                    lat: -25.363,  
                    lng: 131.044,  
                },  
                content:imgItem  
            });  
        }  
    initMap();
```

### 预期结果：
正常添加谷歌地图高级标记

### 实际结果：
报错

### bug描述：
uniapp vue3 ,在index.vue 页面的 web-view 加载 本地html，html 使用 谷歌地图weekly版本，并添加 高级标记时 报错：this.Mi.replaceChildren is not a function 。谷歌地图beta 版本添加高级标记时报错：this.replaceChildren is not a function 。但此html 在web 端直接看，是正常的。这个有什么解决办法吗？

更多关于uni-app vue2 在vue页面web-view 动态加载谷歌地图 并添加高级标记时 报错this.Mi.replaceChildren is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

标题写错了是vue3

更多关于uni-app vue2 在vue页面web-view 动态加载谷歌地图 并添加高级标记时 报错this.Mi.replaceChildren is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue3 语言vue 页面，web-view加载html 后，运行到app const parentElement = document.getElementById(‘myElement’);
const newElement = document.createElement(‘p’);
newElement.textContent = ‘New content’;
console.log(JSON.stringify(newElement));
parentElement.replaceChildren(newElement); 也报错 parentElement.replaceChildren is not a function 。但在web 端正常。 有什么解决办法吗？如何在html 中加入replaceChildren这个方法呢？

找到方法啦！！！！！！！！！！！！！ 在html 中<scritp>顶部加入

<script> (function() { if (!Element.prototype.replaceChildren) { Element.prototype.replaceChildren = function(...nodes) { this.innerHTML = ''; // 清空当前元素的所有子节点 for (let node of nodes) { this.appendChild(node); // 添加新的子节点 } }; } })(); ........................................ 之后再写别的就可以用啦！！！！！！！！！！！！！！

这个错误通常是由于uni-app的web-view组件与谷歌地图API的兼容性问题导致的。以下是可能的原因和解决方案：

  1. 主要原因是web-view内部DOM操作受限，谷歌地图API的部分方法无法正常执行。

  2. 解决方案：

  • 尝试使用标准标记(Marker)代替高级标记(AdvancedMarkerElement)
  • 确保在DOM完全加载后再初始化地图：
document.addEventListener('DOMContentLoaded', initMap);
  1. 替代方案：
  • 使用uni-app的map组件替代web-view方案
  • 如果必须使用web-view，考虑将地图相关代码放在服务端渲染的页面中
  1. 临时解决方案：
// 在initMap前添加polyfill
if(!Element.prototype.replaceChildren){
    Element.prototype.replaceChildren = function(...nodes){
        this.innerHTML = '';
        this.append(...nodes);
    }
}
回到顶部