1

ばかげた質問で申し訳ありませんが、前に Google マップ マーカーに ID を追加するを読んだことがありますが、成功しませんでした。

多数のマーカーを使用してマップを作成しようとしています。jquery を使用してこのマーカーを操作したいと思います。単純な $('#marker1').doSomething(); このマーカーに値付きの id 属性を与えるにはどうすればよいですか? 私の非常に単純なデモ コードは、私がそれを機能させようとした方法を示しています。

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 6,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      draggable: true,
      title: 'Hello World!',
  });
  marker.set("type", "point");
  marker.set("id", "ABC");
}

どうもありがとう！

4

2 に答える 2

1

var markerマーカー オブジェクトを保持します。このオブジェクトに独自のプロパティを追加できます

marker.type = "point";

marker.myID = "ABC";

おそらく、作成したすべてのマーカーを追跡し、関数の外側に配列を作成してスコープを与えたいと思うでしょう。そして、作成したすべてのマーカーをこの配列にプッシュします。

var markers = [];

function initialise()
{
    // Initialise the map etc.

    var marker = new google.maps.Marker({
        // Marker options
    });

    marker.type = "type";

    marker.myID = 4

    markers.push(marker);
}

他のマーカーを作成する場合は、作成した配列にプッシュするだけです。それらにアクセスするには、配列を$.each().

于 2012-09-17T17:51:19.127 に答える
1

次のメソッドを使用して、クリック イベントをマーカーにバインドするだけです。

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
    zoom: 6,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true,
    title: 'Hello World!',
    type: 'point'
});

google.maps.event.addListener(marker, 'click', function() {
    // do something. You may use jQuery here.
});

次のような任意の量のデータをマーカーに追加できます。

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true,
    title: 'Hello World!',
    type: 'point',
    somedata: true
});

そして、そのオブジェクトを使用して、クリック時に特定のアクションを実行します。

google.maps.event.addListener(marker, 'click', function() {
    if (this.somedata) doSomething();
});

さらに、複数のマーカーを配置する場合は、単純なループを使用してすべてのマーカーにクリック イベントを追加できます。

良い例は、緯度/経度の位置の配列があり、それぞれにマーカーをドロップし、クリック時にそれぞれに異なることをさせたい場合です。いくつかの配列を設定できます。1 つは lat/lng 座標で、もう 1 つは一致するタイトルで、たとえば、ページの他の場所に存在する html 要素です (例として、クリックするとその要素が削除されるように)。

var markers  = [],
    marker_i = 0,
    marker_p = ['-25.363882,131.044922','-25.363882,133.044922'],
    marker_t = ['Foo', 'Bar'],
    marker_d = ['.foo', '.bar'];

for (var i = 0; i < marker_pos.length; i++) {
    markers.push(new google.maps.Marker({
        position: marker_p[i],
        map: map,
        draggable: true,
        type: 'point',
        title: marker_t[i],
        htmlelement: marker_d[i]
    });

    google.maps.event.addListener(markers[marker_i], 'click', function() {
        $(this.htmlelement).remove();
    });

    marker_i++;
}

お役に立てれば。

于 2012-09-17T17:51:50.203 に答える