MarkerWithLabel 谷歌地图自定义标记答案

【问题标题】：MarkerWithLabel Google Maps Custom MarkerMarkerWithLabel 谷歌地图自定义标记
【发布时间】：2013-04-12 16:38:56
【问题描述】：

我正在将 MarkerWithLabel 与 Google Maps v3 Javascript API 一起使用。

我目前创建自定义标记，并使用 MarkerWithLabel 的 labelContent 属性来显示我的图标。我这样做是为了可以根据标题动态旋转图标。完美无缺。

现在，我也想为图标添加标签。

我的代码：

var iconLabel = document.createElement("img");
iconLabel.src = icn+"f.png";
iconLabel.setAttribute("id","img"+$i);

var marker = new MarkerWithLabel({
    position: point,
    icon: boatIcons["blank"],
    shadow: boatIcons["blank"],
    draggable: false,
    map: theMap.map,
    flat: true,
    optimized: false,
    visible: true,
    labelContent: iconLabel, 
    labelAnchor: new google.maps.Point(16,16), 
    labelClass: "labels", 
    labelVisible: true,
    labelStyle: {opacity: 0.75},
    labelInBackground: false
});

这将创建 IMG 罚款。但是如何创建一个 DIV，向其中添加一些文本，然后添加上面的 IMG，然后将其添加到我的标记中？

【问题讨论】：

标签： jquery maps

【解决方案1】：

从我的代码中看下面的sn-p：-

var marker5 = new MarkerWithLabel({position: latlngE, 
    draggable: false,
    raiseOnDrag: false, 
    labelContent: "Pnt: 5",
    labelAnchor: new google.maps.Point(20, 0),
    labelClass: "labels",         // the CSS class for the label
    labelStyle: {opacity: 0.75},
    icon: {url: './images/arrows/Dot.png',
    size: new google.maps.Size(20, 20),
    origin: new google.maps.Point(0, 0)},
    marker: MarkerWithLabel});

关键在于指定选项：marker: MarkerWithLabel

看看http://code.google.com/p/jquery-ui-map/wiki/jquery_ui_map_v_3_tutorial

【讨论】：