fix(H5): map polyline/circles color (fixed #3433)

packages/uni-h5/src/view/components/map/MapCircle.tsx

 import { inject, onUnmounted, watch } from 'vue'
 import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
-import { Maps, Map, Circle } from './maps'
+import { Maps, Map, Circle, CircleOptions } from './maps'
+import { hexToRgba } from '../../../helpers/hexToRgba'
 
 const props = {
   latitude: { type: [Number, String], require: true },
   longitude: { type: [Number, String], require: true },
-  color: { type: String, default: '' },
-  fillColor: { type: String, default: '' },
+  color: { type: String, default: '#000000' },
+  fillColor: { type: String, default: '#00000000' },
   radius: { type: [Number, String], require: true },
   strokeWidth: { type: [Number, String], default: '' },
   level: { type: String, default: '' },
@@ -39,30 +40,26 @@ export default /*#__PURE__*/ defineSystemComponent({
       }
       function addCircle(option: Props) {
         const center = new maps.LatLng(option.latitude, option.longitude)
-        function getColor(color: string) {
-          const c = color && color.match(/#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?/)
-          if ('Color' in maps) {
-            if (c && c.length) {
-              return maps.Color.fromHex(
-                c[0],
-                Number('0x' + c[1] || 255) / 255
-              ).toRGBA()
-            } else {
-              return undefined
-            }
-          }
-          return color
-        }
-        circle = new maps.Circle({
+        const circleOptions: CircleOptions = {
           map: map as any,
           center: center as any,
           clickable: false,
           radius: option.radius,
           strokeWeight: Number(option.strokeWidth) || 1,
-          fillColor: getColor(option.fillColor) || getColor('#00000001'),
-          strokeColor: getColor(option.color) || '#000000',
           strokeDashStyle: 'solid',
-        })
+        }
+        const { r: fr, g: fg, b: fb, a: fa } = hexToRgba(option.fillColor)
+        const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color)
+        if ('Color' in maps) {
+          circleOptions.fillColor = new maps.Color(fr, fg, fb, fa) as any
+          circleOptions.strokeColor = new maps.Color(sr, sg, sb, sa) as any
+        } else {
+          circleOptions.fillColor = `rgb(${fr}, ${fg}, ${fb})`
+          circleOptions.fillOpacity = fa
+          circleOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
+          circleOptions.strokeOpacity = sa
+        }
+        circle = new maps.Circle(circleOptions)
       }
       addCircle(props as Props)
       watch(props, updateCircle)

packages/uni-h5/src/view/components/map/MapPolyline.tsx

 import { inject, PropType, onUnmounted, watch } from 'vue'
 import { defineSystemComponent, useCustomEvent } from '@dcloudio/uni-components'
-import { Maps, Map, LatLng, Polyline } from './maps'
+import { Maps, Map, LatLng, Polyline, PolylineOptions } from './maps'
+import { hexToRgba } from '../../../helpers/hexToRgba'
 
 interface Point {
   latitude: number
@@ -60,25 +61,43 @@ export default /*#__PURE__*/ defineSystemComponent({
           path.push(new maps.LatLng(point.latitude, point.longitude))
         })
         const strokeWeight = Number(option.width) || 1
-        polyline = new maps.Polyline({
+        const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color)
+        const { r: br, g: bg, b: bb, a: ba } = hexToRgba(option.borderColor)
+        const polylineOptions: PolylineOptions = {
           map: map as any,
           clickable: false,
           path: path as any,
           strokeWeight,
           strokeColor: option.color || undefined,
           strokeDashStyle: option.dottedLine ? 'dash' : 'solid',
-        })
+        }
         const borderWidth = Number(option.borderWidth) || 0
+        const polylineBorderOptions: PolylineOptions = {
+          map: map as any,
+          clickable: false,
+          path: path as any,
+          strokeWeight: strokeWeight + borderWidth * 2,
+          strokeColor: option.borderColor || undefined,
+          strokeDashStyle: option.dottedLine ? 'dash' : 'solid',
+        }
+        if ('Color' in maps) {
+          polylineOptions.strokeColor = new maps.Color(sr, sg, sb, sa) as any
+          polylineBorderOptions.strokeColor = new maps.Color(
+            br,
+            bg,
+            bb,
+            ba
+          ) as any
+        } else {
+          polylineOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
+          polylineOptions.strokeOpacity = sa
+          polylineBorderOptions.strokeColor = `rgb(${br}, ${bg}, ${bb})`
+          polylineBorderOptions.strokeOpacity = ba
+        }
         if (borderWidth) {
-          polylineBorder = new maps.Polyline({
-            map: map as any,
-            clickable: false,
-            path: path as any,
-            strokeWeight: strokeWeight + borderWidth * 2,
-            strokeColor: option.borderColor || undefined,
-            strokeDashStyle: option.dottedLine ? 'dash' : 'solid',
-          })
+          polylineBorder = new maps.Polyline(polylineBorderOptions)
         }
+        polyline = new maps.Polyline(polylineOptions)
       }
       addPolyline(props as Props)
       watch(props, updatePolyline)

packages/uni-h5/src/view/components/map/maps/google/types.d.ts

@@ -3,10 +3,12 @@ export type GoogleMaps = typeof google.maps
 export type OverlayView = google.maps.OverlayView
 export type LatLng = google.maps.LatLng
 export type Polyline = google.maps.Polyline
+export type PolylineOptions = google.maps.PolylineOptions
 export type Map = google.maps.Map
 export type Marker = google.maps.Marker
 export type Label = google.maps.MarkerLabel
 export type Circle = google.maps.Circle
 export type Icon = google.maps.Icon
 export type Polygon = google.maps.Polygon
-export type Polygon = google.maps.PolygonOptions
+export type PolygonOptions = google.maps.PolygonOptions
+export type CircleOptions = google.maps.CircleOptions

packages/uni-h5/src/view/components/map/maps/types.ts

@@ -2,16 +2,22 @@ import {
   Map as GMap,
   LatLng as GLatLng,
   Polyline as GPolyline,
+  PolylineOptions as GPolylineOptions,
   Circle as GCircle,
+  CircleOptions as GCircleOptions,
 } from './google/types'
 import {
   Map as QMap,
   LatLng as QLatLng,
   Polyline as QPolyline,
+  PolylineOptions as QPolylineOptions,
   Circle as QCircle,
+  CircleOptions as QCircleOptions,
 } from './qq/types'
 
 export type Map = GMap | QMap
 export type LatLng = GLatLng | QLatLng
 export type Polyline = GPolyline | QPolyline
+export type PolylineOptions = GPolylineOptions & QPolylineOptions
 export type Circle = GCircle | QCircle
+export type CircleOptions = GCircleOptions & QCircleOptions