1

我正在尝试使用自定义图标标记创建谷歌地图。我需要能够将动态文本添加到实际标记中。换句话说，无论如何要添加一个div？我需要将 xml 中的价格添加到实际标记中。我希望这是有道理的。任何帮助将不胜感激，或者如果有人能指出我正确的方向。谢谢！

我的查询：

function addMarker() {
    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div class='mapPopup'><div class='mapPopIn'>" + trailhead_name + "</div></div></body></html>";
        var image = 'images/map-marker.png';
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Click for more information",
            icon: image
        });

我要修改的实际地图是：http: //travellinginmexico.com/hotels_map.php?c=cancun

4

2 回答 2

3

有两个选项，InfoBox和MarkerWithLabel。我喜欢 MarkerWithlabel，因为它更轻且更易于使用。缺点是我不知道如何在创建后替换 Markerwithlabel 的文本。您可以使用 InfoBox 执行此操作，因为您实际上需要创建一个 div。

我将给出一个来自 Javascript 的静态数据示例，您可以将其替换为 XML 中的数据。您还需要设置 MarkerWithLabel 的样式以适合您的图标。例如 labelStyle:top 将改变垂直偏移量。

http://jsfiddle.net/RAH6G/单击“不是真正的 ajax”按钮。

 function createMarker(position, label) {
   return new MarkerWithLabel({
   position: position,
   draggable: false,
   map: map,
   labelText: label,
   labelClass: "labels", // the CSS class for the label
   labelStyle: {top: "0px", left: "-21px", opacity: 0.75},
   labelVisible: true
   });
 }

 var readData = function() { // create markers
  pos = [
  new google.maps.LatLng(40, -85),
  new google.maps.LatLng(42, -92),
  new google.maps.LatLng(36, -100),
  new google.maps.LatLng(39, -112)
  ];

  label = ["$200", "99pts.", "US$30", "US$999"];
  for (var i = 0; i < pos.length; i++) {
    createMarker(pos[i], label[i]);
  }     
 }
于 2012-05-20T22:45:31.087 回答
1

我知道这是一个较旧的线程，但我遇到了一个非常相似的问题（尝试更新使用 MarkerWithLabel 创建的标记的标签内容），我花了一段时间才找到解决方案。

用 MarkerWithLabel 创建一个标记：

marker = new MarkerWithLabel({
  position: googlemapslatlng,
  icon: url-to-icon,
  map: map,
  title: "Marker Title",
  labelContent: content,
  labelClass: marker_shade
});

然后您可以使用以下方法更新标签：

marker.labelClass = marker_shade_updated;
marker.labelContent = marker_content_updated;
marker.label.setStyles(); // Force the marker label to redraw

希望这可以帮助。

于 2013-04-19T02:52:35.903 回答