1

Google Maps API v3を使用して、マーカーとヒントを含むかなり標準的な地図を実装しています。

ステップバイステップで行こうとしていますが、マーカーをクリックできるようになると行き詰まります。ドキュメントを読んだところ、マーカーはデフォルトでクリック可能であり、titleパラメーターが設定されているものは何でも表示されます。

マップ内の予想される場所にマーカーを正常に表示しています。しかし、ツールチップを表示することはできません。マーカーはクリック可能（カーソルが変化）のように見えますが、クリックしても何も起こりません。ツールチップが表示されることを期待する必要があります。

これが私のコードです。これは、APIドキュメントで見つけたものの単純な実装ですが、いくつかの工夫が加えられています。

*注：*storesすべてのデータを取得するためにJSオブジェクトを反復処理しています。nameプロパティはプレーンテキストです。

/*  Show Stores Data on Map
-----------------------------------------------------  */

var center = new google.maps.LatLng( 47.56980820673984, -71.09390248632815 );

function initialize()
{
  var mapOptions = {
  center   : center,
  zoom     : 6,
  mapTypeId   : google.maps.MapTypeId.ROADMAP,
  zoomControl : true,
  disableDefaultUI : true
};

theMap = new google.maps.Map(
  document.getElementById("storemap"), mapOptions );

/*  place markers on the map  */
$.each( stores, function(i,v)
{
  stores[i]['marker'] = new google.maps.Marker(
    {
      position : new google.maps.LatLng( this.coords.lat, this.coords.lng ),
      map      : theMap,
      title    : this.name
    });
});

}

initialize();

私は何か見落としてますか ？

4

2 に答える 2

0

皆さんのおかげで、私はドキュメントを完全に誤解していることに気づきました。

私は確かに混乱tooltipしました。InfoWindowプロジェクトにInfoWindowが必要でした。ツールチップはマーカーのホバーに表示される単純なテキストですが、InfoWindowsには独自のコンストラクターが必要です。

助けてくれてありがとう。

于 2013-03-05T14:36:37.503 に答える
0

Jquery の .each を誤用している可能性があります。これを試してください。

/*  place markers on the map  */
stores.forEach(function( store ){
  var tmpmarker = new google.maps.Marker(
    {
      position : new google.maps.LatLng( store.coords.lat, store.coords.lng ),
      map      : theMap,
      title    : store.name
    }
  );
  google.maps.event.addListener(tmpmarker, 'click',
    (function(a){ 
      return function(){
        console.log(JSON.stringify(a, null, 2));
      };  
    })(store)
  );
  store['marker'] = tmpmarker;
});

私の知る限り、マーカーをクリックしたときのデフォルトのポップアップはありません。title 属性は、マウスオーバー時にツールチップとして表示される必要があります。

于 2013-03-04T22:25:18.117 に答える