1

カスタム アイコン マーカーを使用して Google マップを作成しようとしています。実際のマーカーに動的テキストを追加できるようにする必要があります。言い換えれば、divを追加する方法はありますか? xml から実際のマーカーに価格を追加する必要があります。これが理にかなっていることを願っています。どんな助けでも大歓迎です、または誰かが私を正しい方向に向けることができれば. ありがとう！

私の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

4

2 に答える 2

3

InfoBoxとMarkerWithLabelの 2 つのオプションがあります。MarkerWithlabel は軽くて使いやすいので気に入っています。欠点は、作成後に Markerwithlabel のテキストを置き換える方法がわからないことです。実際には div を作成する必要があるため、InfoBox を使用してこれを行うことができます。

XML のデータに置き換えることができる Javascript の静的データの例を示します。また、アイコンに合わせて 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 に答える