Hybrid Native Map and WebView Fusion Framework for Meituan Ride-Hailing

Background

Meituan Ride‑hailing originally used a Web version of the map (Tencent Map JavaScript API) inside an H5 page. Users reported performance issues compared with native map SDKs, leading to slower first‑screen loading and less responsive map interactions.

Problem and Challenges

The team wanted to keep the development efficiency of H5 while achieving the performance of a native map. Simple hybrid approaches (separate pages for H5 and native map, or two side‑by‑side WebViews) could not satisfy the complex UI layout required by the ride‑hailing app, such as floating panels for origin/destination, menus, and ads that need to overlay the map and respond to touch events correctly.

Fusion Framework Overview

A "Native Map & Web Fusion Framework" was built. The core idea is a two‑layer page: the lower layer is a full‑screen native map, the upper layer is a transparent WebView that renders H5 UI. A gesture‑dispatch layer sits on top and intelligently routes touch events either to the WebView (when the touch falls inside a defined hot region) or to the native map (otherwise).

Hot‑Region Data

Hot‑region data are rectangular coordinates (e.g., [0, 0, 50, 50]) that describe screen areas belonging to the WebView. The framework maintains a list of hot regions and updates them dynamically as UI elements move or resize.

Gesture Dispatch Logic

When a touch event arrives, the dispatch layer checks whether the touch point lies within any hot region. If it does, the event is forwarded to the WebView; otherwise it is sent to the native map. This enables seamless interaction with both layers without visual glitches.

Implementation Details

Android implementation (excerpt):

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_DOWN) {
    // Determine target based on hot‑region check
    this.touchHandler = dispatchService.inRegion(event) ? TouchHandler.WebView : TouchHandler.MapView;
  }
  // Forward to native map layer
  if (this.touchHandler == TouchHandler.MapView) {
    return this.mapView.dispatchTouchEvent(event);
  }
  // Forward to WebView layer
  return super.dispatchTouchEvent(event);
}

iOS implementation (excerpt):

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
  UIView *hitTestView = nil;
  // Decide target based on hot‑region check
  if ([self pointInHotspot:point]) {
    // WebView layer
    hitTestView = [self.WebView hitTest:point withEvent:event];
  } else {
    // Native map layer
    hitTestView = [self.mapView hitTest:point withEvent:event];
  }
  return hitTestView;
}

WebView Layer and JSBridge

The WebView exposes a JavaScript API setHotRegion for the business side to define hot regions. All map‑related operations (e.g., adding a marker) are invoked via a JSBridge that forwards messages to the native map layer, which executes the operation and returns results.

Native Map Layer

Built on top of the Tencent Map SDK, the native layer provides high‑performance map primitives, marker management, route drawing, and animation APIs tailored for ride‑hailing scenarios.

Automatic Hot‑Region Maintenance (Vue Directive)

The front‑end stack uses Vue. A custom directive monitors the lifecycle of UI elements: on bind, it calculates the element’s bounding rectangle via getBoundingClientRect() and calls setHotRegion; on unbind, it removes the region. This keeps hot‑region data in sync with dynamic UI changes such as panel expansion.

Testing and Deployment

Both unit tests (≈50 map APIs) and manual QA on simulators and real devices verified gesture routing, hot‑region accuracy, and map functionality. After rollout in the Dianping app, first‑screen map loading time decreased dramatically, map interactions became smoother, and crash rates stayed below 0.1‰.

Conclusion

The framework successfully merges native map performance with H5 development speed, enabling rapid feature iteration while delivering a fluid user experience. It is applicable to any mobile product that requires high‑performance map interactions combined with flexible web‑based UI.