Android Kotlin如何实现运行时可自定义属性的Google Maps Marker

核心逻辑是将Marker的样式生成逻辑与点位的价格属性做绑定，不需要修改现有Marker的基础实现逻辑，按以下步骤操作即可：

• 提前定义价格区间对应的样式规则，比如不同价格对应不同的背景色、文字大小、边框效果等
• 遍历点位列表时，针对每个点位单独读取价格属性，匹配规则后生成专属的Marker图标
• 将生成的图标绑定到对应点位的Marker实例，添加到地图即可

Android端（Google Maps SDK）示例代码 #

// 1. 定义价格区间样式规则
data class MarkerStyle(val bgColor: Int, val textSizeSp: Int)
fun getStyleByPrice(price: Int): MarkerStyle {
    return when {
        price < 100 -> MarkerStyle(Color.GREEN, 12)
        price in 100..500 -> MarkerStyle(Color.YELLOW, 14)
        else -> MarkerStyle(Color.RED, 16)
    }
}

// 2. 动态生成Marker图标
fun createCustomMarker(price: Int, context: Context): BitmapDescriptor {
    val style = getStyleByPrice(price)
    val markerView = LayoutInflater.from(context).inflate(R.layout.custom_marker, null)
    markerView.findViewById<TextView>(R.id.price_text).apply {
        text = "¥$price"
        setTextSize(TypedValue.COMPLEX_UNIT_SP, style.textSizeSp.toFloat())
        setBackgroundColor(style.bgColor)
    }
    // 布局转Bitmap供Marker使用
    markerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED)
    markerView.layout(0, 0, markerView.measuredWidth, markerView.measuredHeight)
    val bitmap = Bitmap.createBitmap(markerView.measuredWidth, markerView.measuredHeight, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    markerView.draw(canvas)
    return BitmapDescriptorFactory.fromBitmap(bitmap)
}

// 3. 遍历点位批量添加Marker
pointList.forEach { point ->
    val markerOptions = MarkerOptions()
        .position(LatLng(point.lat, point.lng))
        .icon(createCustomMarker(point.price, this))
    googleMap.addMarker(markerOptions)
}

前端（JS版Google Maps API）示例代码 #

// 定义价格区间样式规则
function getStyleByPrice(price) {
    if(price < 100) return {bg: 'green', size: '12px'}
    if(price <= 500) return {bg: 'yellow', size: '14px'}
    return {bg: 'red', size: '16px'}
}

// 动态生成SVG格式的Marker图标
function createMarkerIcon(price) {
    const style = getStyleByPrice(price)
    return {
        url: `data:image/svg+xml;utf8,<svg width="40" height="50" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="80%" fill="${style.bg}" rx="4"/><text x="50%" y="40%" text-anchor="middle" font-size="${style.size}" fill="black">¥${price}</text><path d="M20 40 l-5 -10 h10 z" fill="${style.bg}"/></svg>`
    }
}

// 批量添加Marker到地图
pointList.forEach(point => {
    new google.maps.Marker({
        position: {lat: point.lat, lng: point.lng},
        map: map,
        icon: createMarkerIcon(point.price)
    })
})

注意事项 #

• 点位数量超过100个时建议提前缓存不同样式的Marker图标，避免重复生成带来的性能损耗
• 若需要更复杂的Marker样式，直接在生成逻辑中叠加图标、边框等元素即可，只需和价格属性做好对应

内容的提问来源于stack exchange，提问作者Dragos Ciupe