Question

我是谷歌地图和JavaScript的初学者。

我正在使用Maps API V3在谷歌地图上创建一个随机标记，我想在包含所有标记ID的一侧创建一个列表，所以当我点击标记ID时它会放大，在地图上显示标记。特别是我想知道如何在javascript中创建该链接

谢谢

Answer 1

这个答案是从初学者到初学者;）我喜欢benastan对简洁和闭包应用的回答，我仍然想通过编写函数来展示更“基本”的方法。

我觉得没有资格谈论闭包和函数范围，但我可以从经验中说这些闭包“包装器”可以防止在循环内或其他函数内调用的函数出现意外行为。一个这样的错误可能是循环迭代器值结束所有相同的值（最后一次迭代）或未定义。 (my own example)

单击地图以放置标记，然后单击侧面的标记或链接放大。

  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);
  }

Answer 2

假设您有一组lat / lng坐标：

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);
    })();
}

使用JavaScript链接放大标记

2 个答案: