组合自定义标记图像和任意数字字符串

Question

我有一个png我需要用作我的标记，但是，我还需要在每个标记中添加数字序列。 （ 注意，我使用javascript（jQuery）来执行此操作，任何其他提及的代码都是为了理解目的 ）

我已经尝试过（没有任何成功值得一提）使用canvas，就像Android（java）版本一样

private Bitmap writeTextOnDrawable(int drawableId, String text) {

        Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId)
                .copy(Bitmap.Config.ARGB_8888, true);

        Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.WHITE);
        paint.setTypeface(tf);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(convertToPixels(MapaViagem.this, 11));

        Rect textRect = new Rect();
        paint.getTextBounds(text, 0, text.length(), textRect);

        Canvas canvas = new Canvas(bm);

        //If the text is bigger than the canvas , reduce the font size
        if(textRect.width() >= (canvas.getWidth() - 4))     //the padding on either sides is considered as 4, so as to appropriately fit in the text
            paint.setTextSize(convertToPixels(MapaViagem.this, 7));        //Scaling needs to be used for different dpi's

        //Calculate the positions
        int xPos = (canvas.getWidth() / 2) - 1;     //-2 is for regulating the x position offset

        //"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
        int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 8f)) ;

        canvas.drawText(text, xPos, yPos, paint);

        return  bm;
    }

我到目前为止的代码是

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

        var origin = response.lc.origin.split(', ');
        new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(origin[0]), parseFloat(origin[1])),
            map: map,
            icon: {
                url: "template/img/marker_green.png",
                size: new google.maps.Size(144, 144),
                scaledSize: new google.maps.Size(30, 30),
                anchor: new google.maps.Point(13, 29)
            }
            //icon: createMarker(25, 25, 9)
        });
        var route = response.routes[0];
        for (var i = 0; i < route.legs.length; i++) {

            addMarker(route.legs[i].end_location, i, map, ((i + 1) == route.legs.length));
        }
        directionsDisplay.setDirections(response);
    }
});

function addMarker(routeC, i, map1, is_the_last) {

    var url = "template/img/marker_green.png";
    if(is_the_last){
        var url = "template/img/marker_red.png";
    }

    var beachMarker = new google.maps.Marker({
        position: routeC,
        map: map1,
        icon: {
            url: url,
            size: new google.maps.Size(144, 144),
            scaledSize: new google.maps.Size(30, 30),
            anchor: new google.maps.Point(13, 29)
        }
    });
}

---

我不能使用"Google maps: place number in marker?"之类的内容，建议在标记内使用动态生成数字。

icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000'

我正在寻找一些内置的解决方案，而不是"google-maps-utility-library(markerWithLabel)"，但如果没有，那么我很乐意接受一些帮助来实现它。

---

以下是使用带标记的标记的标记版本 *请注意，此代码仅打印前一个标记。 labelContent 根本没有打印

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

        var origin = response.lc.origin.split(', ');
        var marker = new MarkerWithLabel({
            map: map,
            position: new google.maps.LatLng(parseFloat(origin[0]), parseFloat(origin[1])),
            icon: {
                url: "template/img/marker_green.png",
                scaledSize: new google.maps.Size(30, 30)
            },
            labelContent : 1,
            labelAnchor : new google.maps.Point(13, 29),
            //labelClass : "labels", // the CSS class for the label
            labelInBackground : false
        });
        var route = response.routes[0];
        for (var i = 0; i < route.legs.length; i++) {

            addMarker(route.legs[i].end_location, i, map, ((i + 1) == route.legs.length));
        }
        directionsDisplay.setDirections(response);
    }
});

function addMarker(routeC, i, map1, is_the_last) {

    var url = "template/img/marker_green.png";
    if(is_the_last){
        var url = "template/img/marker_red.png";
    }

    var marker = new MarkerWithLabel({
        map: map1,
        position: routeC,
        icon: {
            url: url,
            scaledSize: new google.maps.Size(30, 30)
        },
        labelContent : i,
        labelAnchor : new google.maps.Point(13, 29),
        //labelClass : "labels", // the CSS class for the label
        labelInBackground : false
    });
}