我正在使用 google map v3 api 我想显示信息气泡。例如，当我单击标记时，任何标记的功能都会打开相关的气泡。另一方面，我想用外部链接触发所有气泡。我认为 marker, 'click', function 应该是每个函数。我已经尝试了很多例子，但我没有成功。
这是我的测试地址: http://www.gercekustu.com/test/
这是我的代码:
function getGoogleMap(Altitude, Latitude, Address) {
//var myLatlng = new google.maps.LatLng(Altitude, Latitude, Address);
var image = 'icon.png';
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
var locations = [
['Test içeriği5', -33.890542, 151.274856, 5],
['Test içeriği4', -33.923036, 151.259052, 4],
['Test içeriği3', -34.028249, 151.157507, 3],
['Test içeriği2', -33.80010128657071, 151.28747820854187, 2],
['Test içeriği1', -33.950198, 151.259302, 1]
];
for (var i = 0; i < locations.length; i++) {
//var image = new google.maps.MarkerImage('icon' + i + '.png',
var image = new google.maps.MarkerImage('icon.png',
new google.maps.Size(40, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var location = locations[i];
//alert(location[3]);
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
var infowindow = new google.maps.InfoWindow({
content: location[0],
position: myLatLng
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map);
});
}
infowindow.open(map);
}
谢谢你的帮助
最佳答案
我修改了你的代码，这个对我有用:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Map</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function () {
var map;
var infowindow;
getGoogleMap('41.033245', '29.110191', '<div class="mapContainer"><div class="mapContentLeft"><h1>Hotel Name <i>Information/Suggestion</i></h1><div>Hotel Image</div></div><div class="mapContentRight"><div class="mapHotelStars">*****</div><div class="mapHotelAdress">Hotel Adress</div><div class="mapHotelPrice"> Currency + Integer </div></div></div>');
function getGoogleMap(Altitude, Latitude, Address) {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var locations = [
['Test 5', -33.890542, 151.274856, 5],
['Test 4', -33.923036, 151.259052, 4],
['Test 3', -34.028249, 151.157507, 3],
['Test 2', -33.80010128657071, 151.28747820854187, 2],
['Test 1', -33.950198, 151.259302, 1]
];
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var title = location[0];
var latitude = location[1];
var longitude = location[2];
displayMarker(title, latitude, longitude);
}
}
function displayMarker(title, latitude, longitude) {
var latlong = new google.maps.LatLng(latitude, longitude);
map.setCenter(latlong);
var marker = new google.maps.Marker({
map: map,
title: title,
icon: "icon.png",
position: latlong
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(title);
infowindow.open(map, marker);
});
}
});
</script>
<style type="text/css">
.googleMapContainer {width:700px; height:500px;}
.mapContainer {border:1px solid red;}
</style>
</head>
<body>
<form id="form1">
<div class="googleMapContainer" id="googleMap"></div>
</form>
</body>
</html>
关于javascript - Google Map v3 marker点击功能问题和触发外链，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5058258/