1.新建UTS插件-标准模式组件,命名hello-map,在app-android目录下新建libs并将百度地图aar导入。
-
在hello-map/components/hello-map/hello-map.vue文件下编写如下代码:
<template> <native-view @init="onviewinit"></native-view> </template> <script lang="uts"> import { HelloMap } from "@/uni_modules/hello-map"; export default { data() { return { tmap: null as HelloMap | null, value: "" } }, props: { "text": { type: String, default: '' } }, watch: { "text": { handler(newValue : string, oldValue : string) { this.value = newValue // this.updateText(newValue) }, immediate: true }, }, methods: { //native-view初始化时触发此方法 onviewinit(e : UniNativeViewInitEvent) { //获取UniNativeViewElement 传递给NativeButton插件 this.tmap = new HelloMap(e.detail.element); // this.tmap?.updateText(this.value) }, ontap(e : UniNativeViewEvent) { this.$emit("buttonTap", e) }, updateText(value : string) { // this.tmap?.updateText(value) } }, unmounted() { // iOS平台需要主动释放 uts 实例 this.tmap?.destroy() } } </script> <style> </style>
3.在app-android/index.uts文件下编写如下代码:
import { MapView } from 'com.baidu.mapapi.map.MapView' export class HelloMap { $element : UniNativeViewElement; constructor(element : UniNativeViewElement) { //接收传递过来的UniNativeViewElement this.$element = element; this.bindView(); } map : MapView | null = null; bindView() { //通过UniElement.getAndroidActivity()获取android平台activity 用于创建view的上下文 this.map = new MapView(this.$element.getAndroidActivity()!); //构建原生view //监听原生map点击事件 this.map?.setOnClickListener(_ => { const detail = {} //构建自定义UniNativeViewEvent返回对象 const event = new UniNativeViewEvent("customClick", detail) //触发原生map的点击事件 this.$element.dispatchEvent(event) }) //UniNativeViewEvent 绑定 安卓原生view this.$element.bindAndroidView(this.map!); } destroy() { //数据回收 } }
4.在页面上直接使用hello-map,编译运行到真机提示找不到MapView。
- 打包发布自定义基座也是提示找不到MapView。
求助大佬们,遇到这个问题如何解决?急急急急急急急急急!