2

I'm a beginner in google maps and JavaScript.

I'm creating a random markers on google map using Maps API V3, I want to create a list on the side that contain all Markers Id so when i click on Marker ID it will zoom in, on the map to show the marker. specifically i want to know how to create that link in javascript

thank you

4

2 に答える 2

2

この答えは初心者から初心者までです;）簡潔さとクロージャの適用に関するベナスタンの答えが好きですが、それでも関数を書くことによってより「基本的な」アプローチを示したいと思います。

クロージャと関数スコープについて話す資格はありませんが、経験から、これらのクロージャ「ラッパー」は、ループ内または他の関数内で呼び出される関数からの予期しない動作を防ぐと言えます。そのようなバグの1つは、ループイテレータ値がすべて同じ値（最後の反復）になるか、未定義になる可能性があります。（私自身の例）

完全なコードへのリンク：http：//jsfiddle.net/WaWBw/

地図をクリックしてマーカーを配置し、側面のマーカーまたはリンクをクリックするとズームインします。

  function addMarker(pos) {
    var marker = new google.maps.Marker({
      map: map,
      position: pos
    });
    markers.push(marker);
    count = markers.length - 1;
    addMarkerListener(marker, count, 6);
    makeDiv(count, 4, "Marker #");
    count++;
  }

  function addMarkerListener(marker, index, zoomLevel) {
    google.maps.event.addListener(marker, 'click', function(event) {
      zoomIn(index, zoomLevel);
    });
  }

  function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
  }

  function zoomIn(index, zoomLevel) {
    map.setCenter(markers[index].getPosition());
    map.setZoom(zoomLevel);
  }
于 2012-05-07T16:19:11.987 に答える
1

緯度/経度座標のセットがあるとします。

var coords = [[32, -70], [50, -10], [0, 20]];

座標をループし、マップ上にマーカーをプロットして、リストアイテムを生成します。クリックハンドラーを同時にバインドします：

var tpl = '<a href="javascript: void(0)">Click here to view a point</a>';
// Loop through coordinates.
for (var i in coords) {
    // Create a closure.
    (function() {
        var pt = coords[i],
            latlng = new google.maps.LatLng(pt[0], pt[1]),
            marker = new google.maps.Marker({
                position: latlng,
                map: map // variable containing your google map.
            }),
            elm = document.createElement('li');
        elm.innerHTML = tpl;
        // When you click the list item, set map center to latlng of marker.
        elm.onclick = function() {
            map.setCenter(latlng);
        };
        document.body.appendChild(elm);
    })();
}
于 2012-05-07T14:45:55.263 に答える