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

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

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

来源

2012-05-20 lov2code

有两种选择，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-20 22:45:31

我知道这是一个较旧的线程，但我有一个非常类似的问题（试图更新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-19 02:52:35 TheMeddlingMonk

我可以问你使用哪个版本？不适合我。 –

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

回答

相关问题