Javascript 动态绑定点击到谷歌地图标记链接
试图将点击绑定到Google地图画布外的链接,该链接将在地图标记上打开“信息窗口”。我知道如何为一个特定的点做,但我需要动态地做,因为显示的点总是不同的 以下是我尝试绑定单击的方式: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] +
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等也有类似的变量?不要这样做,创建一个数组,其中包含每个标记、字符串和信息窗口的结构。然后你可以很容易地从你的事件监听器中引用它。是的,我把所有的信息都存储在一个数据库中,它在服务器端循环每个信息。你是对的,它庞大而可怕,我将把它合并成一个漂亮整洁的数组。