0

jQueryプラグインgmap3を使用しています。複数のマーカーをマップに追加することはできますが、そのうちの1つに情報ウィンドウを表示しようとして行き詰まりました。

コメントの下のコードを削除すると、「//情報ウィンドウ付きのマーカーを追加」マーカーが作成されますが、情報ウィンドウはありません。コードを使用すると、マップが作成されません。

$('#test').gmap3(
  //create the map
  { action:'init'
  },

  //add a marker with info window
  { action: 'addInfoWindow',
    address: "London"
  },
  infowindow:{
    options:{
    content: 'This is London'
    },
    apply:[
        { action:'setContent',
            args:[
            '<span style="color:#000">Here is a new content !<span>'
            ]
        }   
    ]
    },

  //add a marker
  { action: 'addMarker',
    address: "Paris",
  },

  //add a marker
  { action: 'addMarker',
    address: "Madrid",
  }

  //autofit the map view
  ,
  "autofit"     

);

これは構文の問題だと思いますが、iveは完全にスタックしているので、助けていただければ幸いです。ありがとう

UPDATE自動調整機能が機能しないことを除いて、以下で機能するようになりました。

$('#test').gmap3({
  action: 'addMarker',
  address: "place de l'étoile, Paris",

  marker:{
    options:{
      draggable: false
    }
  },
  infowindow:{
    options:{
      content: 'Hello World !'
    },
    events:{
      closeclick: function(){
        alert("closing : " + $(this).attr("id")); 
      }
    }
  }
},

  //add a marker
  { action: 'addMarker',
    address: "London",
  },
      "autofit" 

);
4

2 に答える 2

1

あなたのjsonに末尾のコンマがあります

すなわち住所：ロンドン（あなたが言及したコメントの下の2行目）

JavaScript オブジェクトの最後の項目の場合は、コンマを指定しないでください

また、infoWindow が不適切に配置されているように見えます。関数呼び出しの最後にある可能性が高いと思いますが、Gmap3 api に慣れていません。

API を見ると、これらすべてを宣言するよりクリーンな方法があるように見えます。http://gmap3.net/api.htmlを参照します

アクションに infoWindow が属しているようです: "infoWindow" オブジェクト

何かのようなもの：

$('#test').gmap3(
  //create the map
  { 
    action:'init'
  },

  //add a marker with info window
  { 
    action: 'addInfoWindow',
    address: "London"
    infowindow:{
      options:{
        content: 'This is London'
      },
      apply:[
          { action:'setContent',
              args:[
              '<span style="color:#000">Here is a new content !<span>'
              ]
          }   
        ]
      }
  },

  //add a marker
  { 
    action: 'addMarker',
    address: "Paris"
  },

  //add a marker
  { 
    action: 'addMarker',
    address: "Madrid"
  }

  //autofit the map view
  ,
  "autofit"     

);
于 2012-03-02T16:25:09.363 に答える
0

gmap3 のワークフローは非常にややこしいので、構文エラーが発生しやすいと思います ^^

編集：

ただし、いくつかの大きな問題が修正されない限り、このライブラリを「ベータ」としてフラグを立てる必要があります (たとえば、独自のデモでは機能しなかった自動調整など)。

複数のマーカーを使用した「自動調整」の主な問題は、すべてのマーカーがマップに適用されるまで待たなければならないことです。

addMarkerしたがって、 useを繰り返し呼び出す代わりにaddMarkers、 のコールバックで「自動フィッティング」を適用しますaddMarkers。

autofit-option が期待どおりに機能しなかったため、google-API によって提供される可能性を使用します。マーカーの位置からLatLngBoundsオブジェクトを作成し、 を使用して境界を適用しますmap.fitBounds()。

デモ: http://jsfiddle.net/doktormolle/BQyXb/

于 2012-03-02T17:09:26.780 に答える