如何自定义Polyline匹配谷歌地图Android应用样式？含带边框实现

嘿，这两个Polyline的样式需求我之前做Google Maps相关开发时刚好实践过，给你详细拆解实现方法：

要让你的Polyline和官方谷歌地图App里的外观完全对齐，核心是调整线条的圆润度、宽度和颜色——官方的线条是圆润饱满的，没有生硬的直角转折。具体操作如下：

• 用PolylineOptions配置时，重点设置这几个参数：

  • 宽度：官方App的线条宽度大概在12-16dp，记得转成像素（比如getResources().getDisplayMetrics().density * 12）
  • 颜色：选和官方接近的色调，比如经典的谷歌蓝Color.parseColor("#4285F4")
  • 圆角连接：通过jointType(JointType.ROUND)让线条转折处平滑过渡
  • 圆角端点：用startCap(new RoundCap())和endCap(new RoundCap())让线条首尾也呈现圆润效果

• 直接看代码示例（在onMapReady方法中实现）：

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    // 示例线路坐标，替换成你自己的点集
    List<LatLng> routePoints = Arrays.asList(
        new LatLng(37.7749, -122.4194),
        new LatLng(37.7895, -122.4010),
        new LatLng(37.7787, -122.3900)
    );

    PolylineOptions polylineOptions = new PolylineOptions()
        .addAll(routePoints)
        .width(getResources().getDisplayMetrics().density * 12) // 12dp转像素
        .color(Color.parseColor("#4285F4"))
        .jointType(JointType.ROUND)
        .startCap(new RoundCap())
        .endCap(new RoundCap());

    mMap.addPolyline(polylineOptions);
}

单个Polyline本身不支持直接添加边框，我们可以用双层线条叠加的小技巧来实现：先画一条更粗的深色线条当边框，再在它上面叠一条稍细的主色线条，这样就会呈现出清晰的边框效果。

具体步骤：

• 第一步：配置边框线条：

  • 宽度要比主线条宽4-6dp（比如主线条12dp，边框就设16dp）
  • 颜色选主色的深色调（比如主色是谷歌蓝，边框用Color.parseColor("#2C56A0")）
  • 同样设置圆角连接和端点，保持和主线条风格一致

• 第二步：配置主线条，宽度稍窄，颜色用你想要的主色，圆角属性和边框保持统一

• 关键注意点：先添加边框线条，再添加主线条，这样主线条才会覆盖在边框上方，露出四周的边框部分

• 完整代码示例：

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;
    List<LatLng> routePoints = Arrays.asList(
        new LatLng(37.7749, -122.4194),
        new LatLng(37.7895, -122.4010),
        new LatLng(37.7787, -122.3900)
    );

    // 先添加边框线条
    PolylineOptions borderOptions = new PolylineOptions()
        .addAll(routePoints)
        .width(getResources().getDisplayMetrics().density * 16) // 16dp边框
        .color(Color.parseColor("#2C56A0"))
        .jointType(JointType.ROUND)
        .startCap(new RoundCap())
        .endCap(new RoundCap());
    mMap.addPolyline(borderOptions);

    // 再添加主线条
    PolylineOptions mainLineOptions = new PolylineOptions()
        .addAll(routePoints)
        .width(getResources().getDisplayMetrics().density * 12) // 12dp主线条
        .color(Color.parseColor("#4285F4"))
        .jointType(JointType.ROUND)
        .startCap(new RoundCap())
        .endCap(new RoundCap());
    mMap.addPolyline(mainLineOptions);
}

你可以根据自己的UI设计，灵活调整边框和主线条的宽度、颜色，达到想要的效果～

内容的提问来源于stack exchange，提问作者Malwinder Singh