Question

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

MY JQUERY：

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

Answer 1

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

我将举例说明来自Javascript的静态数据，您可以将其替换为XML中的数据。您还需要设置MarkerWithLabel的样式以适合您的图标。例如，labelStyle：top将更改垂直偏移量。

http://jsfiddle.net/RAH6G/点击“not really 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]);
  }     
 }

Answer 2

我知道这是一个较老的线程，但我有一个非常类似的问题（尝试更新用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

希望这有帮助。

将动态内容添加到Google地图标记

2 个答案: