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

我有一个png，我需要用作我的标记，但是，我还需要将数字序列添加到每个标记中。（注意，我正在使用javascript（jQuery）来实现这一点，任何其他提到的代码都是为了理解目的）

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

到目前为止我得到的代码是

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)
        }
    });
}

我一直在寻找一些内置的解决方案，但如果没有，我很乐意接受一些帮助来实现它

---

这是我使用带有标签的标记的版本 *请注意，此代码仅打印上一个标记。标签内容根本没有打印出来

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
    });
}

directionsService.route（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
var origin=response.lc.origin.split（'，'）；
变量标记=新标记WithLabel({
地图：地图，
位置：new google.maps.LatLng（parseFloat（origin[0]），parseFloat（origin[1]），
图标：{
url:“template/img/marker_green.png”，
scaledSize:new google.maps.Size（30,30）
},
标签内容：1，
labelAnchor：新的google.maps.Point（13,29），
//labelClass:“labels”，//标签的CSS类
标签背景：假
});
var route=response.routes[0]；
对于（var i=0；i

没有“内置解决方案”。您在实现时遇到了什么问题？@geocodezip没有什么问题，我只是花了一上午的时间试图让它在没有MarkeWithLabel的情况下工作（我不确定这是否能满足我的需要，我正在尝试实现它，同时等待是否有答案），我可以想象用图像和数字创建一个html元素，然后用它创建一个canvas元素。不过，你必须对每个标记/编号都这样做。

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

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
    });
}