javascript - 使用 JavaScript 链接放大标记

Question

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

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

谢谢你

Answer 1

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

我觉得没有资格谈论闭包和函数作用域，但我可以根据经验说，这些闭包“包装器”可以防止循环或其他函数中调用的函数出现意外行为。一个这样的错误可能是循环迭代器值最终都是相同的值（最后一次迭代）或未定义。（我自己的例子）

完整代码链接：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);
  }

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