Javascript 动态绑定点击到谷歌地图标记链接

Javascript 动态绑定点击到谷歌地图标记链接,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,试图将点击绑定到Google地图画布外的链接,该链接将在地图标记上打开“信息窗口”。我知道如何为一个特定的点做,但我需要动态地做,因为显示的点总是不同的 以下是我尝试绑定单击的方式: for (var i = 0; i < 6; i++) { var pointString = '<a href="#" class="openPoint" id="point' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] +

试图将点击绑定到Google地图画布外的链接,该链接将在地图标记上打开“信息窗口”。我知道如何为一个特定的点做,但我需要动态地做,因为显示的点总是不同的

以下是我尝试绑定单击的方式:

for (var i = 0; i < 6; i++) {
    var pointString = '<a href="#" class="openPoint" id="point' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] + ' Miles Away</a>';
    $('#pointsGoHere').append(pointString);
    $('#point' + i).click(function (e) {
        e.preventDefault();
        //HOW DO I OPEN THE INFOWINDOW TO THE CORRESPONDING MAP MARKER IN THIS CLICK?
    });
}
for(变量i=0;i<6;i++){
var pointString='';
$('#pointsGoHere')。追加(pointString);
$(“#点”+i)。单击(函数(e){
e、 预防默认值();
//如何在此单击中打开相应地图标记的信息窗口?
});
}
以下是我略略缩短的谷歌地图代码,您可以看到我是如何使用它的:

var geocoder;
var map;

function initialize() {

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.75919, -73.984868);
    var mapOptions = {
        center: latlng,
        zoom: 11
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var myLatLng0 = new google.maps.LatLng(40.8752743, -74.0286719);
    mapMarker0 = new google.maps.Marker({
        position: myLatLng0,
        map: map,
        title: 'Origal LLP'
    });
    var contentString0 = '<div id="content0"><div id="siteNotice0"></div><div id="bodyContent0"><div style="display:inline; float:left"><h4>Origal LLP</h4></div></div></div>';

    infowindow0 = new google.maps.InfoWindow({
        content: contentString0
    });
    google.maps.event.addListener(mapMarker0, 'click', function () {
        infowindow0.open(map, mapMarker0);
        map.setCenter(mapMarker0.getPosition());
        map.setZoom(15);
    });


    var zip = $('#zip').val();
    geocoder.geocode({
        'address': zip
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            calculateDistance(results[0].geometry.location);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

    function calculateDistance(latLonClient) {
        var loc0 = new google.maps.LatLng(40.8752743, -74.0286719);

        var clientAndPoint0 = Math.round(google.maps.geometry.spherical.computeDistanceBetween(latLonClient, loc0) * 0.000621371192);

        var myPoints = new Array();
        myPoints[0] = ['Origal LLP', clientAndPoint0, '244 Leonia Ave, Bogota, NJ 07603', 'infowindow0', mapMarker0];
        myPoints.sort(function (b, a) {
            if (a[1] < b[1]) return 1;
            if (a[1] > b[1]) return -1;
            if (a[1] > b[1]) return 1;
            if (a[1] < b[1]) return -1;
            return 0;
        });

        map.setCenter(myPoints[0][4].getPosition());
        map.setZoom(15);


        for (var i = 0; i < 6; i++) {
            var pointString = '<a href="#" class="openPoint" id="point' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] + ' Miles Away</a>';
            $('#pointsGoHere').append(pointString);
            $('#point' + i).click(function (e) {
                e.preventDefault();

            });
        }
    }

}
var地理编码器;
var映射;
函数初始化(){
geocoder=新的google.maps.geocoder();
var latlng=新的google.maps.latlng(40.75919,-73.984868);
变量映射选项={
中心:拉特林,
缩放:11
};
map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
var mylatng0=新的google.maps.LatLng(40.8752743,-74.0286719);
mapMarker0=新建google.maps.Marker({
位置:myLatLng0,
地图:地图,
标题:“Origal有限责任合伙公司”
});
var contentString0=‘原始有限责任合伙’;
infowindow0=新建google.maps.InfoWindow({
内容:contentString0
});
google.maps.event.addListener(mapMarker0,'click',函数(){
infowindow0.open(map,mapMarker0);
setCenter(mapMarker0.getPosition());
map.setZoom(15);
});
var zip=$('#zip').val();
地理编码({
“地址”:zip
},功能(结果、状态){
if(status==google.maps.GeocoderStatus.OK){
calculateDistance(结果[0]。几何体。位置);
}否则{
警报('地理编码因以下原因未成功:'+状态);
}
});
函数CalculateInstance(latLonClient){
var loc0=新的google.maps.LatLng(40.8752743,-74.0286719);
var clientAndPoint0=Math.round(google.maps.geometry.spheremic.ComputedDistanceBeween(latLonClient,loc0)*0.000621371192);
var myPoints=新数组();
myPoints[0]=['Origal LLP',clientAndPoint0',244 Leonia Ave,Bogota,NJ 07603','infowindow0',mapMarker0];
myPoints.sort(函数(b,a){
如果(a[1]b[1])返回-1;
如果(a[1]>b[1])返回1;
如果(a[1]

这是我第一次使用谷歌地图,仍然得到了最新的东西,我知道我可以压缩这段代码,只是还没有到那里,我为膨胀道歉。谢谢您的帮助,如果已经有一个类似的问题和我需要的答案我错过了,我向您道歉。

这应该是您想要的

google.maps.event.trigger(point, "click");
因此,它喜欢:

for (var i = 0; i < 5; i++) {
    var pointString = '<li><a href="#" class="openPoint" id="point' + i + '" pointID="' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] + ' Miles Away</a></li>';
    $('#pointsGoHere').append(pointString);
}
$('.openPoint').each(function () {
    $(this).click(function (e) {
        e.preventDefault();
        var pointID = parseInt($(this).attr('pointID'));
        google.maps.event.trigger(myPoints[pointID][4], "click");
    });
});
for(变量i=0;i<5;i++){
var pointString='
  • '; $('#pointsGoHere')。追加(pointString); } $('.openPoint')。每个(函数(){ $(此)。单击(函数(e){ e、 预防默认值(); var pointID=parseInt($(this.attr('pointID')); google.maps.event.trigger(myPoints[pointID][4],“点击”); }); });
    我假设您正在某种循环中创建变量myLatLng0、mapMarker0等,而myLatLng1..n、mapMarker1..n等也有类似的变量?不要这样做,创建一个数组,其中包含每个标记、字符串和信息窗口的结构。然后你可以很容易地从你的事件监听器中引用它。是的,我把所有的信息都存储在一个数据库中,它在服务器端循环每个信息。你是对的,它庞大而可怕,我将把它合并成一个漂亮整洁的数组。