fix(BaiduMap): failed to add marker and cannot custom the marker icon

docs/Masa.Blazor.Docs/wwwroot/data/page-to-api.json

@@ -11,6 +11,15 @@
   "aspect-ratios": [
     "MResponsive"
   ],
+  "baidumaps":[
+    "MBaiduMap",
+    "MBaiduCircle",
+    "MBaiduLabel",
+    "MBaiduMarker",
+    "MBaiduOverlay",
+    "MBaiduPolygon",
+    "MBaiduPolyline"
+  ],
   "breadcrumbs": [
     "MBreadcrumbs",
     "MBreadcrumbsItem",

src/Masa.Blazor.JS/package.json

@@ -48,6 +48,7 @@
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.4.0",
     "@types/blazor__javascript-interop": "^3.1.4",
+    "@types/bmapgl-browser": "^0.0.3",
     "@types/drawflow": "^0.0.5",
     "@types/echarts": "^4.9.16",
     "@types/node": "^18.7.14",

src/Masa.Blazor.JS/rollup.config.maps.ts

@@ -1,14 +1,16 @@
 import { defineConfig } from "rollup";
 import { terser } from "rollup-plugin-terser";
 
+import typescript from "@rollup/plugin-typescript";
+
 export default defineConfig({
-  input: "./src/proxies/maps/baidumap/index.js",
+  input: "./src/proxies/maps/baidumap/index.ts",
   output: [
     {
       file: "../Masa.Blazor/wwwroot/js/proxies/baidumap-proxy.js",
       format: "esm",
       sourcemap: true,
     },
   ],
-  plugins: [terser()],
+  plugins: [typescript(), terser()],
 });

src/Masa.Blazor.JS/src/proxies/maps/baidumap/index.js → src/Masa.Blazor.JS/src/proxies/maps/baidumap/index.ts

@@ -5,21 +5,19 @@ class BaiduMapProxy {
   constructor(containerId, initArgs) {
     this.instance = new BMapGL.Map(containerId);
 
-    if (initArgs.enableScrollWheelZoom)
-      this.instance.enableScrollWheelZoom();
+    if (initArgs.enableScrollWheelZoom) this.instance.enableScrollWheelZoom();
 
     this.instance.setMaxZoom(initArgs.maxZoom);
     this.instance.setMinZoom(initArgs.minZoom);
     this.instance.centerAndZoom(initArgs.center, initArgs.zoom);
 
     this.instance.setMapType(initArgs.mapTypeString);
 
-    if (initArgs.trafficOn)
-      this.instance.setTrafficOn();
+    if (initArgs.trafficOn) this.instance.setTrafficOn();
 
     if (initArgs.dark)
       this.instance.setMapStyleV2({
-        styleId: initArgs.darkThemeId
+        styleId: initArgs.darkThemeId,
       });
   }
 
@@ -28,25 +26,27 @@ class BaiduMapProxy {
 
     events.forEach((event_name) => {
       this.instance.addEventListener(event_name, async function (e) {
-        if (event_name == "dragstart" ||
+        if (
+          event_name == "dragstart" ||
           event_name == "dragging" ||
           event_name == "dragend" ||
-          event_name == "dblclick") {
+          event_name == "dblclick"
+        ) {
           await dotNetHelper.invokeMethodAsync("OnEvent", event_name, {
             latlng: e.point,
             pixel: e.pixel,
           });
-        }
-        else if (event_name == "click" ||
+        } else if (
+          event_name == "click" ||
           event_name == "rightclick" ||
           event_name == "rightdblclick" ||
-          event_name == "mousemove") {
+          event_name == "mousemove"
+        ) {
           await dotNetHelper.invokeMethodAsync("OnEvent", event_name, {
             latlng: e.latlng,
             pixel: e.pixel,
           });
-        }
-        else {
+        } else {
           await dotNetHelper.invokeMethodAsync("OnEvent", event_name, null);
         }
       });
@@ -74,7 +74,6 @@ class BaiduMapProxy {
   getMapType = () => this.instance.getMapType();
 
   setTrafficOn = () => this.instance.setTrafficOn();
-
   setTrafficOff = () => this.instance.setTrafficOff();
 
   setMapStyleV2 = (options) => this.instance.setMapStyleV2(options);
@@ -94,7 +93,7 @@ class BaiduMapProxy {
       strokeOpacity: circle.strokeOpacity,
       strokeStyle: circle.strokeStyle == 0 ? "solid" : "dashed",
       fillColor: circle.fillColor,
-      fillOpacity: circle.fillOpacity
+      fillOpacity: circle.fillOpacity,
     });
 
     this.instance.addOverlay(c);
@@ -106,9 +105,26 @@ class BaiduMapProxy {
     var m = new BMapGL.Marker(marker.point, {
       offset: marker.offset,
       rotation: marker.rotation,
-      title: marker.title
+      title: marker.title,
     });
 
+    if (marker.icon && marker.icon.url) {
+      const { url, size, options } = marker.icon;
+      const opts: BMapGL.IconOptions = {};
+      if (options) {
+        if (options.anchor) {
+          opts.anchor = new BMapGL.Size(options.anchor.width, options.anchor.height);
+        }
+
+        if (options.imageOffset) {
+          opts.imageOffset = new BMapGL.Size(options.imageOffset.width, options.imageOffset.height);
+        }
+      }
+      m.setIcon(
+        new BMapGL.Icon(url, new BMapGL.Size(size.width, size.height), opts)
+      );
+    }
+
     this.instance.addOverlay(m);
 
     return m;
@@ -117,7 +133,7 @@ class BaiduMapProxy {
   addLabel(label) {
     var l = new BMapGL.Label(label.content, {
       offset: label.offset,
-      position: label.position
+      position: label.position,
     });
 
     this.instance.addOverlay(l);
@@ -126,29 +142,27 @@ class BaiduMapProxy {
   }
 
   addPolyline(polyline) {
-    if (polyline.points == null)
-      return null;
+    if (polyline.points == null) return null;
 
     var pl = new BMapGL.Polyline(polyline.points, {
       strokeColor: polyline.strokeColor,
       strokeWeight: polyline.strokeWeight,
       strokeOpacity: polyline.strokeOpacity,
       strokeStyle: polyline.strokeStyle == 0 ? "solid" : "dashed",
       geodesic: polyline.geodesic,
-      clip: polyline.clip
-    });
+      clip: polyline.clip,
+    } as any);
 
     this.instance.addOverlay(pl);
 
     return pl;
   }
 
   addPolygon(polygon) {
-    if (polygon.points == null)
-      return null;
+    if (polygon.points == null) return null;
 
     var bmapPoints = [];
-    polygon.points.forEach(element => {
+    polygon.points.forEach((element) => {
       bmapPoints.push(toBMapGLPoint(element));
     });
 
@@ -158,7 +172,7 @@ class BaiduMapProxy {
       strokeOpacity: polygon.strokeOpacity,
       strokeStyle: polygon.strokeStyle == 0 ? "solid" : "dashed",
       fillColor: polygon.fillColor,
-      fillOpacity: polygon.fillOpacity
+      fillOpacity: polygon.fillOpacity,
     });
 
     this.instance.addOverlay(pg);
@@ -169,28 +183,31 @@ class BaiduMapProxy {
   contains(overlay) {
     var os = this.instance.getOverlays();
     for (let index = 0; index < os.length; index++) {
-      if (os[index] === overlay)
-        return true;
+      if (os[index] === overlay) return true;
     }
     return false;
   }
 
   destroyMap() {
-    if (this.instance != null)
-      delete this.instance;
+    if (this.instance != null) delete this.instance;
   }
 }
 
-BMapGL.Polygon.prototype.setPathWithGeoPoint = (points, polygon) => {
-  if (points == null)
-    return;
+if (typeof BMapGL !== "undefined") {
+  BMapGL.Polygon.prototype.setPathWithGeoPoint = (points, polygon) => {
+    if (points == null) return;
 
-  var bmapPoints = [];
-  points.forEach(element => {
-    bmapPoints.push(toBMapGLPoint(element));
-  });
+    var bmapPoints = [];
+    points.forEach((element) => {
+      bmapPoints.push(toBMapGLPoint(element));
+    });
+
+    polygon.setPath(bmapPoints);
+  };
 
-  polygon.setPath(bmapPoints);
+  console.info("BMapGL is loaded");
+} else {
+  console.error("BMapGL is not defined");
 }
 
 const toBMapGLPoint = (point) => new BMapGL.Point(point.lng, point.lat);
@@ -201,6 +218,6 @@ const init = (containerId, initArgs) => {
   }
 
   return null;
-}
+};
 
-export { init }
+export { init };

src/Masa.Blazor/Components/Map/BaiduMap/BaiduMapIcon.cs

@@ -0,0 +1,7 @@
+namespace Masa.Blazor;
+
+public record BaiduMapIcon(string Url, BaiduMapSize Size, BaiduMapIconOptions? Options = null);
+
+public record BaiduMapSize(int Width, int Height);
+
+public record BaiduMapIconOptions(BaiduMapSize? Anchor = null, BaiduMapSize? ImageOffset = null);

src/Masa.Blazor/Components/Map/BaiduMap/Overlays/MBaiduMarker.cs

@@ -33,21 +33,25 @@ public string? Title
             set => SetValue(value);
         }
 
+        [Parameter]
+        [MasaApiParameter(ReleasedOn = "v1.7.1")]
+        public BaiduMapIcon? Icon { get; set; }
+
         protected override void RegisterWatchers(PropertyWatcher watcher)
         {
             base.RegisterWatchers(watcher);
 
-            watcher.Watch<string>(nameof(Title), async (val)
-                => await OverlayJSObjectRef.TryInvokeVoidAsync("setTitle", val));
-
-            watcher.Watch<GeoPoint>(nameof(Point), async (val)
-                => await OverlayJSObjectRef.TryInvokeVoidAsync("setPosition", val));
+            watcher.Watch<string>(nameof(Title), (val) => InvokeJsMethod("setTitle", val))
+                .Watch<GeoPoint>(nameof(Point), (val) => InvokeJsMethod("setPosition", val))
+                .Watch<Size>(nameof(Offset), (val) => InvokeJsMethod("setOffset", val))
+                .Watch<float>(nameof(Rotation), (val) => InvokeJsMethod("setRotation", val));
 
-            watcher.Watch<Size>(nameof(Offset), async (val)
-                => await OverlayJSObjectRef.TryInvokeVoidAsync("setOffset", val));
+            return;
 
-            watcher.Watch<float>(nameof(Rotation), async (val)
-                => await OverlayJSObjectRef.TryInvokeVoidAsync("setRotation", val));
+            void InvokeJsMethod(string methodName, object args)
+            {
+                _ = OverlayJSObjectRef.TryInvokeVoidAsync(methodName, args);
+            }
         }
     }
 }

src/Masa.Blazor/Core/MasaComponentBase.cs

@@ -51,7 +51,8 @@ public ForwardRef RefBack
     private ElementReference? _prevRef;
     private bool _elementReferenceChanged;
 
-    public ILogger Logger => LoggerFactory.CreateLogger(GetType());
+    [JsonIgnore]
+    public ILogger? Logger => LoggerFactory.CreateLogger(GetType());
 
     #region Build class and style