使用JavaScript链接放大标记

Question

我是Google地图和JavaScript的初学者。

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

谢谢

Answer 1

这个答案是从初级到初学者;）我喜欢benastan对简洁的答案和封闭的应用，还是我想表现出更多的“基本“通过编写函数的方法。

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

链接到全码：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

假设你有一组纬度/经度坐标：

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