Tengo una aplicación Ionic Cordova ejecutándose tanto en iOS como en Android con Angular. Uso el complemento @ionic-native/google-maps para mostrar un mapa junto con diferentes tipos de marcadores. Hasta ahora, solo he usado marcadores estáticos de archivos .png que funcionan perfectamente y de forma esperada.
Sin embargo, llegué a un punto en el que quiero que los usuarios vean otros marcadores que dependen de un estado en el código. Para resolver esto, he creado una plantilla SVG como una cadena donde reemplazo algún valor para reflejar los parámetros que quiero que se muestren. Luego realizo algunas expresiones regulares en la cadena para codificarla correctamente (similar a XMLSerializer.serializeToString() ) antes de que Base64 la codifique y la prefije con data:image/svg+xml;base64, . De esta manera, tengo una URL de datos para usar con la etiqueta src en el atributo img del marcador a través de la propiedad de URL del icono MarkerOption de Marker que da como resultado:
const icon = { url: 'data:image/svg+xml;base64,PD9 (...)', size: { width: 38, height: 40 }, anchor: [0, 40] } const marker: Marker = this.map.addMarkerSync({ icon, (...) }) Según la documentación de cordova-plugin-googlemaps (ver aquí ), esta es una forma válida de especificar un icono para un marcador. Sin embargo, Ionic intenta de forma predeterminada obtener esta URL de http://localhost:8100 , lo que, naturalmente, fallará. Termino con el siguiente mensaje de error en la consola:
map_0_24694408793: "Can not load image from 'http://localhost:8100/data:image/png;base64,Pd9 (...)' También probé diferentes enfoques sin ningún resultado. Como file:// , / , // y window.Ionic.WebView.convertFileSrc() (como para archivos normales). También intenté ingresar la URL directamente en el parámetro del ícono: icon: icon.url
¿Existe alguna posibilidad de decirle a Ionic que no busque esa fuente cuando contiene un URI de datos: imagen que he pasado por alto?
Versiones: